資訊專欄INFORMATION COLUMN
摘要：網(wǎng)上搜羅的一個方法，利用代碼如下，不過本人木有實現(xiàn)成功，歡迎大家留言已實現(xiàn)成功的。并且這個方法兼容性目前來說還較差。所以放在最后一個，不太推薦，不過還是很好奇，這個東西是怎么實現(xiàn)的。
經(jīng)過搜索查找，總結(jié)幾種常用的css自適應(yīng)的正方形的解決方案： html代碼：
以下為幾種解決方案：
利用padding-bottom:100%撐開，如果無內(nèi)容可不設(shè)置height:0;這一項，如果有內(nèi)容的情況下還想保持為正方形，則需要設(shè)置height:0;
.z{
width: 100%;
padding-bottom: 100%;
border: 1px solid red;
height: 0;
}
利用after偽類,先存在問題是，如果加入內(nèi)容則高度會被撐開，而設(shè)置height:0并不能解決這一問題，有待研究，如果大家有好的方案，可以留言
.z {
width: 100%;
border: 1px solid red; }
.z:after {
content: "";
display: block;
margin-top: 100%;
}
利用padding:50% 0;原理和padding-bottom:100%大致相似，但是此處如果有內(nèi)容則是從div的一半處開始。
.z {
width: 100%;
padding: 50% 0;
border: 1px solid red;
height: 0;
}
網(wǎng)上搜羅的一個方法，利用vm,代碼如下，不過本人木有實現(xiàn)成功，歡迎大家留言已實現(xiàn)成功的demo。并且這個方法兼容性目前來說還較差。所以放在最后一個，不太推薦，不過還是很好奇，這個東西是怎么實現(xiàn)的。
.z {
width: 100%;
height: 100vm;
border: 1px solid red;
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111518.html
摘要：如果需求是制作相對視口高度自適應(yīng)的正方形，估計就只能使用單位了吧轉(zhuǎn)自純實現(xiàn)自適應(yīng)正方形 在處理移動端頁面時，我們有時會需要將 banner 圖做成與屏幕等寬的正方形以獲得最佳的體驗效果，如 Flipbord 的移動頁面：showImg(https://segmentfault.com/img/bVNVjL?w=377&h=666); 那么應(yīng)該怎么使用純 CSS 制作出能夠自適應(yīng)大小的正...
摘要：如果需求是制作相對視口高度自適應(yīng)的正方形，估計就只能使用單位了吧轉(zhuǎn)自純實現(xiàn)自適應(yīng)正方形 在處理移動端頁面時，我們有時會需要將 banner 圖做成與屏幕等寬的正方形以獲得最佳的體驗效果，如 Flipbord 的移動頁面：showImg(https://segmentfault.com/img/bVNVjL?w=377&h=666); 那么應(yīng)該怎么使用純 CSS 制作出能夠自適應(yīng)大小的正...
摘要：那想要優(yōu)化這一點，唯一的方法就是利用內(nèi)容高度來撐開而非，這個方案跟消除浮動所用的方案非常相似給容器添加一個子元素偽元素，并把子元素偽元素的設(shè)為，使其實際高度相當(dāng)于容器的寬度，如此一來，便能把容器的高度撐至與寬度一致了。 一個基礎(chǔ)卻又容易混淆的css知識點 本文依賴于一個基礎(chǔ)卻又容易混淆的css知識點：當(dāng)margin/padding取形式為百分比的值時，無論是left/right，還是t...
摘要：做移動端自適應(yīng)時可能很多人都對自適應(yīng)和之間的關(guān)系產(chǎn)生疑問也有一些人會疑慮比如我的自適應(yīng)方案沒有加會不會出問題針對這些疑問我說一下我的見解。 做移動端自適應(yīng)時可能很多人都對自適應(yīng)和dpr之間的關(guān)系產(chǎn)生疑問,也有一些人會疑慮比如我的自適應(yīng)方案沒有加dpr會不會出問題,針對這些疑問我說一下我的見解。 1. 什么是尺寸自適應(yīng) 首先標(biāo)題說的自適應(yīng),可能自適應(yīng)在不同人眼里理解不同，特別與響應(yīng)式的關(guān)...
閱讀 1310·2021-11-11 16:55
閱讀 1571·2021-10-08 10:16
閱讀 1225·2021-09-26 10:20
閱讀 3609·2021-09-01 10:47
閱讀 2489·2019-08-30 15:52
閱讀 2711·2019-08-30 13:18
閱讀 3223·2019-08-30 13:15
閱讀 1162·2019-08-30 10:55
