rem動態適配

2021-10-11 15:32:37 字數 604 閱讀 7987

(function (doc, win)if(

!doc.addeventlistener)

return

win.

addeventlistener

(resizeevt, recalc,

false

) doc.

addeventlistener

('domcontentloaded'

, recalc,

false)}

)(document, window

這裡的750px就是設計稿的寬度。在此設計稿下換算如下。

如果設計稿中元素為20px,則轉換為rem 為0.2rem元素會根據螢幕的尺寸放大或者縮小原理: 瀏覽器預設的1rem =16px, 手機上則根據dpi的不同,這個值有所改變 1rem有多少個px這個是受到最外層元素的font-size影響的。 設定html的fontsize值,設定好後,內部元素的1rem值會被這個值改變。 1. font-size=「裝置寬度/設計稿寬度」 將這個值作為1rem的px個數,畫素不能太小,就x100. 2. 那麼設計稿中元素為25px值時候,在裝置上就是25rem,然後在除以100,就是0.25rem

Rem 等比適配始末

在viewport 等比適配始末 說過使用 viewport 來實現等比適配的例子,本文詳解等比適配的另一種方式 拿到乙個寬度為 vwidth 的視覺稿 設裝置螢幕寬度為 dwidth 在視覺稿上量得乙個元素的寬度為 elevwidth 那麼要實現按照寬度等比適配,在各種裝置中元素的實際寬度 x 將...

移動端rem適配

3 使用js 將設計圖劃分為10等份或者15等份。新建common.less檔案,這是乙個專門來適配的檔案。我們大概可以寫如下的檔案 設定常見的螢幕尺寸 修改裡面的html文字大小 a 一定要寫到最上面 html 我們此次定義的劃分的份數 為 15 no 15 320 media screen an...

rem 適配方案

首先我們要明白,為什麼要用rem單位呢,常用的px不好嗎?原因是如果我們用px作為長度大小單位的話,就無法根據螢幕大小變化實時改變頁面元素的大小,反之,rem就可以做到實時適配。其次,我們也要清楚以rem為單位的元素大小是根據css html根標籤下的文字大小 fontsize 來改變的。在實際開發...