aspect-ratio很爽,卻是低版本瀏覽器的噩夢

語言: CN / TW / HK

錯誤案例

一次偶然的機會在抖音上刷到了aspect-ratio的css屬性,就覺得這個css簡直太爽了,正好跟我現在的專案有一個需求吻合,第二天我悄悄把aspect-ratio給安排上了,用起來是真的爽,然後噩夢就來了😈。

在測試階段,在低版本瀏覽器上,就敗得一塌糊塗,頁面的寬高直接就亂了,完全不符合需求,一問才知道,原來是在搜狗瀏覽器上看的,嚇得我趕緊改成其他方案。所以,就算現在CSS更新了很多新的屬性,可以方便我們寫更多的樣式,但是還是需要注意瀏覽器相容問題,以免出現類似的問題

aspect-ratio例子

說回aspect-ratio這個屬性,這個屬性就是保持寬高比

舉個簡單的例子🌰

image-20230303174526066

在這個卡片中,我們需要再紅色框的這個盒子保持正方形,且這個整個盒子的寬高是不定的,寬度根據螢幕的寬度而定。

YaSol前期是比較傻的辦法,就是就是通過js來獲取紅框的寬度,然後再通過js動態設定紅款的高度,這樣就能保證紅框是正方形的。這個辦法也不行不行,只是當我看到了aspect-ratio後,直接用一個CSS樣式就能搞定,非常的方便

如果使用aspect-ratio的話,只需要在紅框這個盒子上加上下面的CSS樣式就能達到相同的效果

.box{  aspect-ratio:1/1 }

當然我們可以舉一反三,如果說是1/1就說明寬高比例1:1,如果我們需要保持寬度是高度的兩倍的話,那我們只需要把1/1改成2/1即可實現寬是高的兩倍

image-20230303175225572

aspect-ratio解決相容問題

今天因為遇到了這類相容性問題,所以也就沒有在專案中使用aspect-ratio,我也是去搜了一下,發現了一個解決方案,測試了一下還行,可以用。

就是利用positionpadding來達到這類效果,還是用上面的那個例子🌰來說。

我們在紅框外包一層class為parent的div盒子,然後給他設定為相對定位,並且設定padding-top的值,下面是寬高比對應的padding-top

tips:感覺這個還是需要根據專案而定,反正YaSol在使用1/1寬高比的時候發現使用100%的padding-top並不能保證1/1,所以padding-top值可以自己根據情況而上下浮動

| 寬高比 | padding-top值 | | ------- | ---------------- | | 1/1 | 100% | | 4:3 | 75% | | 3:2 | 66.67% | | 16:9 | 56.25% |

案例

jcode

html

``` width: 200px

 
aspect-ratio
 
   
     
padding-top
   
 

​ ```

css

``` .container{  display: flex; }

box {

border: 1px solid black;  width: 200px;  background: yellow;  aspect-ratio: 1/1; }

box2{

width: 200px; } .parent{  position:relative;  width:100%;  padding-top:100%;  overflow: hidden; } .parent .padding_box{  position:absolute;  top:0;  left:0;  right:0;  bottom:0;  width:100%;  background:green; } ```

js

const input = document.getElementById("input") const metric = document.getElementById("metric") const box = document.getElementById("box") const box2 = document.getElementById("box2") input.addEventListener("change", (e) => {  let spanText = `width: ${e.target.value}px`  metric.innerHTML = spanText  box.style.width = `${e.target.value}px`  box2.style.width = `${e.target.value}px` })

執行效果如下:

image-20230303183300675

總結

aspect-ratio好用簡單,一個CSS樣式搞定,但是相容性差,如果有低版本低核心瀏覽器相容需求,那麼記得用之前先檢視一下CSS屬性的相容性。

當然也許有更好更簡單的辦法實現,歡迎👏🏻大家一起討論學習交流

image-20230303183736827