2023年CSS自適應正方形必須拿下
標題黨了屬實是，見諒。點贊+收藏=學會了?? ，閱讀完你會收獲以下知識。
- [x] ?css實現(xiàn)正方形的幾種方案及優(yōu)缺點
- [x] ?css正方形布局實際應用場景
- [x] ?由正方形布局引發(fā)的其他應用場景擴展
前言
在電商、個人博客等網(wǎng)站我們或多或少都可以看到css正方形的應用場景，自適應正方形布局是必須要掌握的；接下來采黎帶大家揭開css自適應正方形神秘的面紗~
正方形
這很簡單，設(shè)置盒子寬高都為200px就可以了
<div?class="box">小明寫的</div>
.box?{
????width:?200px;
????height:?200px;
????background:?pink;
}
復制代碼
自適應正方形
青銅
提起自適應，想必都會想到rem、vw等相對單位，我們分別用這些單位來實現(xiàn)一下。
rem
<div?class="rem">rem</div>
body?{
????font-size:?16px;
}
.rem?{
????width:?10rem;
????height:?10rem;
????background:?pink;
}
@media?only?screen?and?(max-width:?1200px)?{
????body?{
????????font-size:?12px;
????}
}
復制代碼
2.gif屏幕寬度大于1200px時，字體為16px，rem的盒子的大小為 160px * 160px；
屏幕寬度小于1200px時，字體為12px，rem的盒子的大小為 120px * 120px；
實際應用場景屏幕寬度變化會動態(tài)計算rem的值，這里只用于案例理解。
優(yōu)點
在適配了rem的項目中，可以直接使用rem設(shè)置盒子寬高，即自適應正方形
缺點
在未設(shè)置rem的項目中，單獨為了實現(xiàn)自適應正方形有點大材小用
vw
<div?class="vw">vw</div>
.vw?{
????width:?10vw;
????height:?10vw;
????background:?yellow;
}
復制代碼
3.gif可以看到正方形跟隨著屏幕寬度的變化自適應，這是我們想要的效果
優(yōu)點
vw為內(nèi)置視口單位，可直接使用。
缺點
在實際的業(yè)務場景中，將設(shè)計稿的尺寸轉(zhuǎn)化為vw相對麻煩
黃金
使用 百分比+padding，這里有一個很細的知識點；當padding、margin取值為百分比時，百分比的值是以父元素的width為參考。
<div?class="padding"></div>
.padding?{
????width:?20%;
????padding-top:?20%;
????/*?padding-top或padding-bottom都可以?*/
????background:?#696969;
}
復制代碼
我們給盒子的寬度設(shè)置20%，使用的padding的縱軸將盒子高度撐開，這樣便得到了一個自適應正方形。
4.gif細心的小伙伴會發(fā)現(xiàn)，現(xiàn)在是個自適應正方形沒錯了，但是高度被占滿了，內(nèi)容沒地方放了。 是的，當前只是一個正方形；在實際業(yè)務場景中，內(nèi)部不是圖片就是其他內(nèi)容，不止需要一個正方形的。
解決辦法：再嵌套一層內(nèi)容盒子，外層方形盒為相對定位，內(nèi)層內(nèi)容盒為絕對定位；內(nèi)層盒寬高基于外層方形盒，代碼如下
<div?class="box-wrap">
????<div?class="box-content">我是內(nèi)容區(qū)域</div>
</div>
.box-wrap?{
????position:?relative;
????width:?20%;
????padding-top:?20%;
}
.box-content?{
????position:?absolute;
????width:?100%;
????height:?100%;
????top:?0;
????left:?0;
????z-index:?1;
????background:?burlywood;
}
復制代碼
.box-content類為內(nèi)容盒，我們可以在內(nèi)容盒里為所欲為還原設(shè)計稿了。
若方形區(qū)域只需要展示圖片，同理如下
<div?class="box-wrap">
????<img?src="./img/A.webp"?alt="">
</div>
.box-wrap?{
????position:?relative;
????width:?20%;
????padding-top:?20%;
}
.box-wrap?>?img?{
????position:?absolute;
????width:?100%;
????height:?100%;
????top:?0;
????left:?0;
????z-index:?1;
????object-fit:?cover;
}
復制代碼
6.gif這里我們就實現(xiàn)了一個自適應方形圖片了。
優(yōu)點
無需其他配置，設(shè)置靈活，擴展性強。
缺點
需要額外嵌套一層內(nèi)容盒（個人拙見）
鉆石
顧名思義，它很膩害；他就是css屬性aspect-ratio
**aspect-ratio MDN文檔** [1]
aspect-ratio，簡言之就是寬高比。多說無益，上代碼
<div?class="box-square">我是內(nèi)容</div>
.box-square?{
????aspect-ratio:?1?/?1;
????/*?aspect-ratio:?1;?可簡寫?*/
????width:?20%;
????background:?chocolate;
}
復制代碼
8.gif一個屬性，自適應正方形就OK啦；屬性再好，也得看兼容性和瀏覽器支持。
7.png優(yōu)點
屬性通俗易懂，無需其他配置，無需嵌套內(nèi)容盒。
缺點
唯一缺點就是兼容性了，2023年了該支持的基本都支持上了，此事古難全！
活學活用
至此，知識點應該都掌握了吧；讓我們來實現(xiàn)一個真實的業(yè)務需求，如圖
1.jpeg實現(xiàn)這個布局，假設(shè)總寬1000px，商品卡片左右間距12px，布局要求自適應+響應式。
百分比+padding實現(xiàn)
<main>
????<div?class="shop">
????????<div?class="shop-img"><img?src="./img/A.webp"?alt=""></div>
????????<div?class="shop-title">這是小黎測試的文字區(qū)域，實際運用一下百分比+padding實現(xiàn)自適應方形布局。</div>
????</div>
????<div?class="shop">
????????<div?class="shop-img"><img?src="./img/A.webp"?alt=""></div>
????????<div?class="shop-title">這是小黎測試的文字區(qū)域，實際運用一下百分比+padding實現(xiàn)自適應方形布局。</div>
????</div>
????<div?class="shop">
????????<div?class="shop-img"><img?src="./img/A.webp"?alt=""></div>
????????<div?class="shop-title">這是小黎測試的文字區(qū)域，實際運用一下百分比+padding實現(xiàn)自適應方形布局。</div>
????</div>
????<div?class="shop">
????????<div?class="shop-img"><img?src="./img/A.webp"?alt=""></div>
????????<div?class="shop-title">這是小黎測試的文字區(qū)域，實際運用一下百分比+padding實現(xiàn)自適應方形布局。</div>
????</div>
</main>
復制代碼
main {
max-width: 1000px;
margin: 0 auto;
padding: 0 12px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
.shop {
width: calc(25% - 9px);
box-shadow: 0 0 8px #0002;
border-radius: 4px;
overflow: hidden;
.shop-img {
position: relative;
width: 100%;
padding-top: 100%;
> img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
object-fit: cover;
}
}
.shop-title {
padding: 8px;
font-size: 14px;
color: #232323;
}
}
}
@media only screen and (max-width: 768px) {
main {
.shop {
width: calc(50% - 6px);
margin-bottom: 12px;
}
}
}
復制代碼
來看看效果
9.gifaspect-ratio實現(xiàn)
使用aspect-ratio了屬性，我們可以少嵌套一個外層方形盒
<main>
<div class="shop">
<img src="./img/A.webp" alt="">
<div class="shop-title">這是小黎測試的文字區(qū)域，實際運用aspect-ratio實現(xiàn)自適應方形布局。</div>
</div>
<div class="shop">
<img src="./img/A.webp" alt="">
<div class="shop-title">這是小黎測試的文字區(qū)域，實際運用aspect-ratio實現(xiàn)自適應方形布局。</div>
</div>
<div class="shop">
<img src="./img/A.webp" alt="">
<div class="shop-title">這是小黎測試的文字區(qū)域，實際運用aspect-ratio實現(xiàn)自適應方形布局。</div>
</div>
<div class="shop">
<img src="./img/A.webp" alt="">
<div class="shop-title">這是小黎測試的文字區(qū)域，實際運用aspect-ratio實現(xiàn)自適應方形布局。</div>
</div>
</main>
復制代碼
樣式基本不變，改一下圖片相關(guān)的部分。
main?{
????max-width:?1000px;
????margin:?0?auto;
????padding:?0?12px;
????display:?flex;
????align-items:?center;
????justify-content:?space-between;
????flex-wrap:?wrap;
????.shop?{
????????width:?calc(25%?-?9px);
????????box-shadow:?0?0?8px?#0002;
????????border-radius:?4px;
????????overflow:?hidden;
????????>?img?{
????????????width:?100%;
????????????aspect-ratio:?1;
????????????object-fit:?cover;
????????}
????????.shop-title?{
????????????padding:?8px;
????????????font-size:?14px;
????????????color:?#232323;
????????}
????}
}
@media?only?screen?and?(max-width:?768px)?{
????main?{
????????.shop?{
????????????width:?calc(50%?-?6px);
????????????margin-bottom:?12px;
????????}
????}
}
復制代碼
來看看效果
10.gif至此，css實現(xiàn)正方形的內(nèi)容已經(jīng)闡述完畢。通過上面示例，也引發(fā)了我的一些思考，愿與諸君共享之。
擴展
在實際業(yè)務中，應用到的布局不止正方形，也有長方形、圓形等。
我們再來看個需求——UI規(guī)定圖片區(qū)域?qū)捀弑葹?:3，給的圖片也是4:3。
一般情況我們的方案是：設(shè)置好圖片寬度，高度自適應就OK了。這樣做相對簡便，但也會存在一些問題；比如圖片寬高比并不是4:3，或多或少，又或者傳的圖不規(guī)整；這樣會導致我們的頁面布局不可控，所謂失之毫厘謬以千里。
這時候就牽扯到了代碼健壯性和可擴展性，作為前端開發(fā)個人覺得頁面應該有良好的用戶體驗，而不是調(diào)教用戶。接下來我分別用百分比+padding、aspect-ratio等方案來實現(xiàn)該業(yè)務場景。
借用方形示例，這里我就只貼關(guān)鍵代碼
百分比+padding實現(xiàn)
main?{
????.shop?{
????????.shop-img?{
????????????width:?100%;
????????????padding-top:?75%;
????????}
????}
}
復制代碼
aspect-ratio實現(xiàn)
main?{
????.shop?{
????????>?img?{
????????????width:?100%;
????????????aspect-ratio:?4?/?3;
????????????object-fit:?cover;
????????}
????}
}
復制代碼
看下效果
11.gif本文收錄于Css雕蟲小技專欄內(nèi)，有興趣可以關(guān)注。月更兩篇勉勉強強達標了還好沒斷在2月，3月份大概率會出“單頁網(wǎng)站”；本文若對你有所幫助，歡迎一鍵三連~
余音
文章有誤的地方，歡迎大家及時指正。春風有信，花開有期，再會！
作者：采黎https://juejin.cn/post/7204485623461691450
前端大學 公眾號 祝 您:2023 年暴富！萬事如意！ 分享前端干貨，點贊就是最大的支持,
比心??