サイズ変更センサー - CSSの比例divサイジング

Question

私はスクロールバーのないウィンドウのフルサイズを塗りつぶす3つの水平な列を持つフレックスボックスレイアウトを持っています。

中央の列には、A4ページを表示するdivがあります。次元は常に比例する必要があり、ブラウザがサイズ変更された場合、divはその場で応じてサイズを変更する必要があります。

divの内容もまたスケーリングする必要があります。 divには、親ページのコンテナと一致するように縮小する必要のあるテキストや画像を含むいくつかの要素が含まれます。

私は最初に試しました。

A4-Portrait {width: auto; height: auto;max-width: 595.296px;max-height: 
841.896px;} 

しかし、もちろん、これはproportionalyサイズを変更したり、収容空間をaccomadateする高さと幅のサイズを変更するだけDIVを縮小dosent。

問題を説明する簡単なサンプルをコーディングしました。

body 
 
{ 
 
    padding: 0em; 
 
    margin: 0em; 
 
    height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
    font-family: arial; 
 
    box-sizing: border-box; 
 
} 
 

 
header, main, footer 
 
{ 
 
    padding: 1em;flex: 1; 
 
} 
 

 
header, footer 
 
{ 
 
    background-color: #999; 
 
} 
 

 
main 
 
{ 
 
    flex: 2; 
 
    background-color: grey; 
 
} 
 

 
page 
 
{ 
 
    padding: 1em; 
 
    background: white; 
 
    display: block; 
 
} 
 

 
.A4-Portrait 
 
{ 
 
    width: 595.296px; 
 
    height: 841.896px; 
 
}

<header>[header]</header> 
 

 
<main> 
 
    <page id="pageSize" class="A4-Portrait"> 
 
     [page] 
 
    </page> 
 
    
 
</main> 
 

 
<footer>[footer]</footer>

UPDATE：私はので、私はJSファイルを含む「Fit.js」

使用してしまった私は、以下を追加する必要がありました、純粋なCSSの解決策を見つけることができませんでした実装するコードpxのA4ページサイズはそのままで、JSは親DIVから最大の次元を取り戻しました。これはまた、ブラウザのユーザーのサイズ変更を監視していました。

// get element references 
var foo = document.querySelector('main'); 
var bar = document.querySelector('#pageSize'); 
// fit bar into foo 
// the third options argument is optional, see the README for defaults 
// https://github.com/soulwire/fit.js 
var watching = fit(bar, foo, { 

    // Alignment 
    hAlign: fit.CENTER, // or fit.LEFT, fit.RIGHT 
    vAlign: fit.CENTER, // or fit.TOP, fit.BOTTOM 

    // Fit within the area or fill it all (true) 
    cover: false, 

    // Fit again automatically on window resize 
    watch: true, 

    // Apply computed transformations (true) or just 
    // return the transformation definition (false) 
    apply: true 
}); 

Answer 1

すべてをvwで設定した場合は、すべて画面の幅に合わせて縮尺されます。私はこれがあなたの後だったと思いますか？

A4ページ率（1：1.414）を使用してページのサイズを設定しました。私は、私が設定した幅をとり、それを1.414倍にして、高さについてはcalcを使いました。

フォントサイズについては、すべてがちょっとした推測になります。しかしこれは、フォント・サイズを設定する方法を考え出すにはいくつかの助けになるかもしれません：http://emilolsson.com/tools/vw-unit-calc-an-online-responsive-css-font-size-calculator/

body 
 
{ 
 
    padding: 0em; 
 
    margin: 0em; 
 
    height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
    font-family: arial; 
 
    box-sizing: border-box; 
 
} 
 

 
header, main, footer 
 
{ 
 
    padding: 1em;flex: 1; 
 
} 
 

 
header, footer 
 
{ 
 
    background-color: #999; 
 
} 
 

 
main 
 
{ 
 
    flex: 2; 
 
    background-color: grey; 
 
} 
 

 
page 
 
{ 
 
    padding: 1em; 
 
    background: white; 
 
    display: block; 
 
} 
 

 
.A4-Portrait 
 
{ 
 
    width: 80vw; 
 
    height: calc(1.414 * 80vw); 
 
    margin: 0 auto; 
 
} 
 
    
 
.page-header { 
 
    font-size: 5vw; 
 
} 
 
    
 
.page-body { 
 
    font-size: 3vw; 
 
}

<header>[header]</header> 
 

 
<main> 
 
    <page id="pageSize" class="A4-Portrait"> 
 
     <h1 class="page-header">Page header</h1> 
 
     <p class="page-body">Page text page text page text</p> 
 
    </page> 
 
    
 
</main> 
 

 
<footer>[footer]</footer>