響應A4的CSS代碼

Question

從this question我有一個非常漂亮的代碼來渲染一張A4紙到我的web應用程序。我調整它來滿足我的需求。以下是代碼片段：

.book { 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #FAFAFA; 
 
    font: 12pt "Tahoma"; 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
} 
 

 
.page { 
 
    display: block; 
 
    width: 21cm; 
 
    height: 29.7cm; 
 
    margin: 1cm auto; 
 
    border: 1px #D3D3D3 solid; 
 
    border-radius: 5px; 
 
    background: white; 
 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
 
} 
 

 
.subpage { 
 
    margin: 1cm; 
 
    width: 19cm; 
 
    height: 27.7cm; 
 
    outline: 0cm #FAFAFA solid; 
 
} 
 

 
@page { 
 
    size: A4; 
 
    margin: 0; 
 
} 
 

 
@media print { 
 
    .page { 
 
    margin: 0; 
 
    border: initial; 
 
    border-radius: initial; 
 
    width: initial; 
 
    min-height: initial; 
 
    box-shadow: initial; 
 
    background: initial; 
 
    page-break-after: always; 
 
    } 
 
}

<div class="container-fluid"> 
 
    <div class="book"> 
 
    <div class="page"> 
 
     HEADER 
 
     <div class="subpage" id='editor-container'>CONTENT</div> 
 
    </div> 
 
    </div> 
 
</div>

此代碼是非常漂亮的渲染什麼，我想一個電腦屏幕上做。但是當你使用它的小尺寸屏幕，例如平板電腦，這是不是很方便。

我怎樣才能使此代碼響應西裝哪裏會顯示在屏幕？

基本上，如果表單調整大小將完全顯示在屏幕上，或者至少從左側到右側，並且用戶可以滾動顯示從頂部到底部的內容，那將會很好。

Answer 1

使用vw單位，而不是cm得到預期的效果。 1vw是屏幕寬度的1％。

我乘以100/23值，使頁面的寬度（21cm）和margin S（1cm每個）以全屏幕寬度。

.book { 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #FAFAFA; 
 
    font: 12pt "Tahoma"; 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
} 
 

 
.page { 
 
    display: block; 
 
    width: calc(100/23 * 21vw); 
 
    height: calc(100/23 * 29.7vw); 
 
    margin: calc(100/23 * 1vw) auto; 
 
    border: 1px #D3D3D3 solid; 
 
    border-radius: 5px; 
 
    background: white; 
 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
 
} 
 

 
.subpage { 
 
    margin: calc(100/23 * 1vw); 
 
    width: calc(100/23 * 19vw); 
 
    height: calc(100/23 * 27.7vw); 
 
    outline: 0cm #FAFAFA solid; 
 
} 
 

 
@page { 
 
    size: A4; 
 
    margin: 0; 
 
} 
 

 
@media print { 
 
    .page { 
 
    margin: 0; 
 
    border: initial; 
 
    border-radius: initial; 
 
    width: initial; 
 
    min-height: initial; 
 
    box-shadow: initial; 
 
    background: initial; 
 
    page-break-after: always; 
 
    } 
 
}

<div class="container-fluid"> 
 
    <div class="book"> 
 
    <div class="page"> 
 
     HEADER 
 
     <div class="subpage" id='editor-container'>CONTENT</div> 
 
    </div> 
 
    </div> 
 
</div>

，不過也許你就必須改變內容如何縮放（像使用vw單位的一切或某些其他方式），因爲這樣一來，你不會得到內容的縮放。

---

另一種選擇是使用JavaScript來獲取屏幕寬度和使用transform: scale進行調整您的需要。演示：

function adjustZoomLevel() { 
 
    var documentWidth = window.innerWidth 
 
    || document.documentElement.clientWidth 
 
    || document.body.clientWidth; 
 
    
 
    // 1 cm = 37.795276px; 
 
    var zoomLevel = documentWidth/(23 * 37.795276); 
 
    
 
    // stop zooming when book fits page 
 
    if (zoomLevel >= 1) return; 
 
    
 
    document.querySelector(".book").style.transform = "scale(" + zoomLevel + ")"; 
 
} 
 

 
adjustZoomLevel(); 
 

 
window.addEventListener("resize", adjustZoomLevel);

.book { 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #FAFAFA; 
 
    font: 12pt "Tahoma"; 
 
    transform-origin: 0 0; 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
} 
 

 
.page { 
 
    display: block; 
 
    width: 21cm; 
 
    height: 29.7cm; 
 
    margin: 1cm auto; 
 
    border: 1px #D3D3D3 solid; 
 
    border-radius: 5px; 
 
    background: white; 
 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
 
} 
 

 
.subpage { 
 
    margin: 1cm; 
 
    width: 19cm; 
 
    height: 27.7cm; 
 
    outline: 0cm #FAFAFA solid; 
 
} 
 

 
@page { 
 
    size: A4; 
 
    margin: 0; 
 
} 
 

 
@media print { 
 
    .page { 
 
    margin: 0; 
 
    border: initial; 
 
    border-radius: initial; 
 
    width: initial; 
 
    min-height: initial; 
 
    box-shadow: initial; 
 
    background: initial; 
 
    page-break-after: always; 
 
    } 
 
}

<div class="container-fluid"> 
 
    <div class="book"> 
 
    <div class="page"> 
 
     HEADER 
 
     <div class="subpage" id='editor-container'>CONTENT</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

如果你不需要這是超精密，瓦迪姆的方式工作得很好，和很多比我要少建議哈克。但是，對於我的使用情況，根據頁面的複雜程度，子像素縮放會導致事物不能始終100％正確定位。如果你需要的一切完美地縮小/像一個PDF，你唯一可以做的方式，這是與CSS」變換：規模（）屬性和媒體查詢。

例如

.page { 
    width: 29.7cm; 
} 

@media screen and (max-width: 800px) { 
    .page { 
      transform: scale(0.8); 
    } 
} 

@media screen and (max-width: 600px) { 
    .page { 
      transform: scale(0.6); 
    } 
} 
/* etc */ 

這主要是一個繁瑣的過程，需要玩弄得到縮放正確的數額，但它一直只有始終與最少的佈局怪癖爲我工作的事情。

你會偶然發現的一件事是，transform: scale使頁面變小，它實際上並沒有在文檔中「移動」頁面。他們會明顯下跌，但仍然佔用的空間相同的量，所以當你擴展下來你會得到增加了頁面之間的利潤。這可以通過向頁面添加負邊距來緩解。假設他們堆疊，然後上下滾動：

.page { 
    width: 29.7cm; 
} 

@media screen and (max-width: 800px) { 
    .page { 
      transform: scale(0.8); 
      margin-bottom: -5cm; 
    } 
} 

@media screen and (max-width: 600px) { 
    .page { 
      transform: scale(0.6); 
      margin-bottom: -10cm; 
    } 
} 

當然，這些變換值不是成比例的（BA-達姆，tish），所以你必須玩，發現工作的正確價值觀對你而言，你是否應該沿着這條道路走下去。