前端頁面適配的rem換算

2021-08-07 12:47:25 字數 1670 閱讀 7465

之前有些適配做法,是通過js動態計算viewport的縮放值(initial-scale)。

例如以螢幕320畫素為基準,設定1,那螢幕375畫素就是375/320=1.18以此類推。

但直接這樣強制頁面縮放過於粗暴,會導致頁面文字失真模糊。

px是相對固定單位,字型大小大小直接被定死,所以使用者無法根據自己設定的瀏覽器字型大小而縮放,em和rem雖然都是相對單位,但em是相對於它的父元素的font-size,頁面層級越深,em的換算就越複雜,而rem是直接相對於根元素,這就避開了很多層級關係。移動端新型瀏覽器對rem的相容很好,可以放心使用。

有時我們會看到有些使用rem的頁面裡會先給頁面根元素乙個樣式:

html

為什麼是62.5%?

大多數瀏覽器的預設字型大小是16px,因此1rem=16px,這樣不方便我們px和rem的換算,假設1rem=10px,那麼100px=10rem,25px=0.25rem。這樣就好換算很多,於是就有了上面的10/16。

如果是640的設計稿,需要除以2轉化為和iphone5螢幕等寬的320。所以設計稿px單位/2/10轉為rem。之後再**查詢設定每個螢幕大小的font-size百分比,頁面會根據上面設定的根font-size適配。

看到這裡是不是覺得一切很完美?然而,這裡面有兩個深坑:

1.我看了網上很多關於rem的資料,基本都說瀏覽器的預設字型大小就是16px,然後直接定義font-size:62.5%。但是,rem屬於css3的屬性,有些瀏覽器的早期版本和一些國內瀏覽器的預設字型大小並不是16px,那麼上面的10/16換算就不成立,直接給html定義font-size: 62.5%不成立。

2.chrome強制字型最小值為12px,低於12px按12px處理,那上面的1rem=10px就變成1rem=12px,出現偏差(下面給demo)。

解決方案: 將1rem=10px換為1rem=100px(或者其它容易換算的比例值);不要在pc端使用rem。

那麼上面的頁面根元素樣式要改為:

html

再用本工廠總結得出的各解析度**查詢換算:

@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) 

}@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait)

}@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait)

}@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait)

}@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait)

}@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait)

}

至此,坑填完。設計稿px換算直接/100即可得到rem值。

前端頁面的適配使用rem換算

大名鼎鼎的flexible 原理 flexible.js正是利用rem單位相對根元素的font size來做計算,而我們需要做的就是根據不同的螢幕算出html的font size,而頁面內的大小單位都根據rem來寫,從而實現了自適應。假設拿到的設計稿和上述網易的一樣都是750,flexible會把設...

前端介面的rem適配換算

為什麼要使用rem 之前有些適配做法,是通過js動態計算viewport的縮放值 initial scale 例如以螢幕320畫素為基準,設定1,那螢幕375畫素就是375 320 1.18以此類推。但直接這樣強制頁面縮放過於粗暴,會導致頁面文字失真模糊。px是相對固定單位,字型大小大小直接被定死,...

前端px與rem換算

之前有些適配做法,是通過js動態計算viewport的縮放值 initial scale 例如以螢幕320畫素為基準,設定1,那螢幕375畫素就是375 320 1.18以此類推。但直接這樣強制頁面縮放過於粗暴,會導致頁面文字失真模糊。px是相對固定單位,字型大小大小直接被定死,所以使用者無法根據自...