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