ウィンドウを半分幅に縮小すると、HTML要素も半分の幅に縮小されるようなHTMLページを設計する方法

Question

HTML要素を半分の幅に縮小すると、半幅？

Answer 1

Timさんの元のコメントによれば、相互排他的ではない2つの選択肢があります（それらを組み合わせることができます）。

要素を拡大縮小するには、パーセント値を使用するだけです。物事を管理するには、最小幅と最大幅を静的に設定し、そこから作業したいと思うでしょう。

CSS：

div { margin: 0; padding: 0 } 
.pagewrapper { max-width: 1024px; min-width: 800px } 
.halfwidth { width:40%; margin-left:5%; margin-right: 5% } 

HTML：

<div class="pagewrapper"> 
    <div class="halfwidth"></div> 
    <div class="halfwidth"></div> 
</div> 

これはstupidified例です。最初の「列」のクラスと最後のクラスのクラスを使用して、片方または両方にパディングしかないようにするのはちょっと考えています。

は、または代わりに、流動性の他にメディアクエリがあります。

@media only screen and (max-width: 1023px) { 

    body { 
    font-size: 0.8em; 
    line-height: 1.5em; 
    } 

    .pagewrapper { 
    max-width: 1023px; 
    min-width: 0; 
    } 

} 

再度、おそらくない最良の例わずか数寸法を調整するよりも考えることが多くありますので。

すべてのことを話しました。コンセプトに全く慣れていない場合は、すでに多くの作業（たとえば、1140グリッドhttp://cssgrid.net）を行っているフレームワークから学ぶことをおすすめします。どの技法が正しいか選択して選択します。あるいは、少なくとも記事の一部を読んでください.SOの答えは、あなたに流体や反応のよいレイアウトを十分に理解させるものではないためです。