從this question我有一個非常漂亮的代碼來渲染一張A4紙到我的web應用程序。我調整它來滿足我的需求。以下是代碼片段:響應A4的CSS代碼
.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>
此代碼是非常漂亮的渲染什麼,我想一個電腦屏幕上做。但是當你使用它的小尺寸屏幕,例如平板電腦,這是不是很方便。
我怎樣才能使此代碼響應西裝哪裏會顯示在屏幕?
基本上,如果表單調整大小將完全顯示在屏幕上,或者至少從左側到右側,並且用戶可以滾動顯示從頂部到底部的內容,那將會很好。
我已經提出了幾個應用程序與固定大小頁面的概念一起工作,是的,他們很難做出響應。在任何特定時間,屏幕上是否會有多個頁面? –
是的,它可以添加頁面,這就是爲什麼我認爲最好只顯示從左到右,並讓用戶向下滾動。類似於使寬度(21釐米)可調整大小並完全顯示,然後調整高度以獲得與真實比例的東西? –
@MaximeOzenne我的解決方案可以幫助你嗎? –