画面サイズに基づいてDivsのページのサイズを変更するにはどうすればよいですか？

Question

私はコーディングテストを完了する途中です。私は画面サイズに応じてすべてのdivサイズを変更したい。これは私のテストが私のラップトップでは見えないが、それはMacのコンピュータモニタで見えるのと同じだからです。私の小さなラップトップでは、すべての部門が大きく見えますが、Macコンピュータのモニターではまともに見えるようです。

Answer 1

使用メディアクエリまたはその代わりにPX
の％またはVW/VHで設定幅/高さ、私はそれはあなたが探しているものであると思います... それともブートストラップや基礎

Answer 2

使用のようなフレームワークを使用しますvh。

Refer Viewport sized typography

あなたは全幅と全高をしたい場合は100vhと100vwを使用してください。それに応じて変更します。

div { 
    height: 100vh; 
    width:100vh 
} 

Answer 3

Chromeデベロッパーツールを使用して、divのサイズを変更する解像度を確認する必要があります。

あなたはdiv要素がある場合：

#bluebox { 
 
width: 50px; 
 
height: 50px; 
 
background-color: blue; 
 
}

<div id="bluebox"> 
 
</div>

をしかし、画面サイズが480PXとき広いあなただけのdivは、あなたがこのように行うだろう25ピクセル25ピクセルXになりたい：

#bluebox { 
 
width: 50px; 
 
height: 50px; 
 
background-color: blue; 
 
} 
 

 
@media (max-width: 480px) { 
 
    #bluebox { 
 
    width: 25px; 
 
    height: 25px; 
 
    } 
 
}

<div id="bluebox"> 
 
</div>

これはメディア照会で行われます。これは非常に簡単で標準的です。 私はそれが助けて欲しい！