2つのパーセンテージdivsを応答させる

Question

私はお互いの隣にそれぞれ45％の幅を持つ2つのdivを持っています。

<div class="rightbox"> text </div><div class="leftbox"> text </div> 


.rightbox { 
margin-top:40px; 
border:1px solid red; 
float:right; 
width:45%; 
height:500px; 
background-color:rgba(155,195,207,1); 
} 

.leftbox { 
margin-top:40px; 
border:1px solid black; 
float:left; 
width:45%; 
height:500px; 
background-color:rgba(155,195,207,1); 
} 

どのように私はrightboxが応答あなたが応答ボックスをドロップダウンしたい画面用@mediaクエリを定義leftboxの下

Answer 1

ドロップダウン作るのですか。

たとえば、あなたが480の画面の後にそれをしなければならないCSSはこのCSSは、画面の幅が少ないしたり480PXに等しい場合にのみ適用されます

@media all and (max-width:480px){ 
    .rightbox, .leftbox{ 
     float:none; 
     width:100%; 
    } 
} 

する必要があります。あなただけ@mediaクエリは正常に動作し、画面幅を検出し、また、ビューポートメタタグを使用する必要が@mediaクエリを持つすべてのデバイス上で完璧な結果については

。

メタタグ

<meta name="viewport" content="width=device-width, initial-scale=1.0">