Rem 等比適配始末

2021-09-11 10:01:42 字數 1884 閱讀 9721

在viewport 等比適配始末 說過使用 viewport 來實現等比適配的例子，本文詳解等比適配的另一種方式

拿到乙個寬度為 vwidth 的視覺稿

設裝置螢幕寬度為 dwidth

在視覺稿上量得乙個元素的寬度為 elevwidth

那麼要實現按照寬度等比適配，在各種裝置中元素的實際寬度 x 將滿足公式

//等比


elevwidth/vwidth = x/dwidth;


//我們的目的是求x


x = (elevwidth/vwidth)dwidth;複製**
拿到視覺稿之後，elevwidth 和 vwidth 都已經固定了，但是 dwidth 在不同的裝置中確實不同的，而且需要實際執行的時候我們才能拿到 dwidth，這個時候就要利用 rem 的特性了，我們通過阻塞執行的 js 動態設定 rem，使得rem=dwdith/10，套入剛才的公式：

x=(elevwidth/vwidth)*10*rem


//體現在css中


.classname 複製**
為什麼設定是 dwdith/10 呢？方便計算而已，當然也可以除以別的基數，但是盡量不要讓 rem 太小，有相容性問題

這段 css 需要放在 body 標籤的開始位置，因為 rem 值要盡可能早的設定成功，避免無謂的重排重繪（有些裝置中若元素樣式已經生效，動態改變 rem 未必能起作用，所以這個動作更需要提前）



(function() 


// 設定 data-dpr 屬性，留作的 css hack 之用


html.setattribute('data-dpr', dpr);


// 安卓平台額外加上標記類


if (isandorid) 


})();


script>


...複製**
如果每在視覺稿上量出乙個值，在寫到樣式檔案之前都得通過那個公式計算一翻，那絕對不是乙個好策略，我們希望量到啥就寫啥

使用 less，sass 等 css 預處理器的函式

//設計稿為640


@function


rem($val) 


//設計稿為750


@function


rem750($val) 


//使用


.classname 複製**
也可以使用 webpack-loader，例如：change-rem-loader，這個 loader **做的事也是上述的轉化計算(寫乙個 webpack loader 並不複雜，你可以自己寫乙個符合自己情況的 loader)

'use strict';


module.exports = function(source) 


return (value / divval).tofixed(6) + 'rem';


});return source;


}複製**
這樣之後，我們 css 同樣可以這樣寫（如何讓 loader 起作用不是本文的範圍）

.classname 複製**
也許你的工程技術棧裡面，使用的不是 webpack，也沒有使用 less、sass 等預處理器，那你可以根據你的實際情況去尋找一種預處理方案，只要達到推導公式的效果就可以了。

什麼？沒有合適的方案，那你是時候充充電了

期待您的關注~~

rem動態適配

function doc,win if doc.addeventlistener return win.addeventlistener resizeevt,recalc,false doc.addeventlistener domcontentloaded recalc,false documen...

移動端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 來改變的。在實際開發...