css實現寬高動態變化，生成正方形div的2種方式
阿新 • • 發佈：2019-02-03
在一些特殊的情況中，我們需要實現div隨著頁面放大縮小。
最近我遇到的一些問題就是在電腦上設計的時候，寫死的寬高在瀏覽器上顯示的時候一切正常，但是公司的60寸顯示器上卻是發生很大的變化，這都是解析度的不同造成的影響。
這種一般的情況可以根據按照百分比來設定寬高，就可以解決不同解析度顯示的問題。
但是新遇到的一個需求中，需要在一個按百分比設定寬高的div a中，得到一個正方形div b。因為a的寬高在不同顯示器上是不固定的，所以我們不能直接設定b ’width：100%；height：100%‘來解決這個問題，如果是簡單的賦予相同的固定的高度寬度，在頁面大小發生縮放的時候，佈局會發生改變，也很影響整體的效果。
下面就是純css生成正方形的3種方式：
html程式碼：
<body>
<div style="height: 30%; width: 100%; background-color: yellow;position: relative;">
<div style="background-color: red; width: 30%;padding-top: 30%;height: 0;">
<b style="color: black;font-size: 34px;">通過padding實現的正方形</b 1.根據padding屬性實現正方形。
圖中的左側就是通過padding實現的正方形
padding的屬性可能的值有四種類型：
根據組成可以看出padding-top的大小剛好等於寬度，所以在視覺上的效果就是一個正方形，用這種方式有一個不太方便的地方就是這個div中元素會被padding擠到div外。 後面可以用絕對定位的方式實現視覺上的效果。
2.利用vw、vh來實現正方形
在圖中 右側的藍色正方形就是通過這個方法實現的。
1vw = 1% viewport width
1vh = 1% viewport height。
這裡的viewport是指最大的視窗。
<div style="background-color: blue; height: 25vw; width: 50%;">
<b style="color: white;font-size: 34px;">通過vw，vh實現的正方形</b></div>這個div的父級容器的寬度是50%，所以自身的寬度相當於整個視窗的25%，換算成vw的單位就是25vw，所以height：25vw。這樣也實現了正方形的效果，而且不會出現元素被擠出div的情況。