@media min-wdthとmax-widthを使ってコンテナの幅を固定する方法

Question

私のウェブページには3つのセクションがあります。 ウィンドウサイズを小さくすると、サイズ変更が続けられます。 Webページの内容が重ならないように、ある時点でサイズ変更を停止したい。

<div class="section1"> 

//code here 
</div> 
<div class="section2"> 
// code here 
</div> 
<div class="section3"> 
// code here. 
</div> 

はここに私のCSSです：

は、ここに私のコードです。

.section1{ 
width:14%; 
} 
.section2{ 
    width:26%; 
    left:14%; 
} 
.section3{ 
    width: 60%; 
    left: 40%; 

} 

900px幅で気付いたページ内容です。私はこの声明を使った。

@media (min-width:900px) { 
    .section1 { 
     width: 5%; 
    }  
    .section2{ 
     width: 28%; 
     left: 5%; 
    } 
    .section3{ 
     width: 67%; 
     left: 33%; 
    }  
} 

まだ230ピクセルまでリサイズしていますが、900ピクセルでリサイズを停止します。パーセンテージではなくピクセル単位で幅を指定する必要がありますか？

Answer 1

定義済みのハードコード幅が900pxのdivラッパーに、3 divセクションをラップすることができます。

HTMLラッパー：

<div class="wrapper"> 
    <div class="section1"> 

    //code here 
    </div> 
    <div class="section2"> 
    // code here 
    </div> 
    <div class="section3"> 
    // code here. 
    </div> 
</div> 

CSSを追加する：これはあなたの問題を解決するのに役立ちます

.wrapper {width: 900px} 

希望を。

Answer 2

最小幅を設定すると、問題の要素のサイズがその点まで変更されます。

例：上記の例で

@media (max-width: 900px) { 

    .section1 { 
     width: 5%; 
     minimum-width: 250px; 
    } 

} 

あなたは900pxのビューポートを打ったら、それは幅が250ピクセルに当たるまで、要素は、その幅を維持し、さらにリサイズ停止、その後、それに応じてサイズが変更されます。