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 ></div>
<div style="position: absolute;right:0;top:0;background-color: pink;width: 50%;height: 100%;">
<div style="background-color: blue; height: 25vw; width: 50%;">
<b style="color: white;font-size: 34px;">通過vw,vh實現的正方形</b></div>
</div >
</div>
</body>
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的情況。