移動端rem怎樣適配

時間 2019-11-05

標籤移動 rem 怎樣適配欄目無線简体版

原文原文鏈接

向貓咪提問

通常咱們在公司開發頁面，UI設計圖是出750px的圖，也就是基於Iphone 6 設計的圖。若是咱們用若是得當的配置，UI圖上的東西是多少px，咱們就寫多少px，這是程序員最方便的。可是這個是怎麼配置的呢？javascript

不要方，其實很簡單，跟着思路走起來~~~css

若是不配置，咱們在CSS裏寫多少px才能還原設計圖？

來舉個例子~html

假設如今圖上有個寬度100px的按鈕，UI圖是750px的圖。java

答案是咱們應該寫 100px / 2 = 50px。css裏width = 50px; 就這樣。webpack

那爲何是100px除以2呢？？？由於iPhone的dpr = 2。程序員

那什麼是dpr？

dpr的全稱是window.devicePixelRatio，它等於物理像素 / dips。其實就是一個比例。（物理像素就是一個個的小格子，用來顯示不一樣顏色的。dips能夠理解爲虛擬像素，就像咱們寫的css。實在理解不了就忽略吧...）web

從iphone4開始，iphone就是dpr就等於2了。因此其實就是把UI圖除以2，就是你應該在css寫多少px。npm

是否是很簡單~~~數組

以上是怎麼還原設計稿的px單位，那如今又有個問題來了，咱們不是全部人都是用的iphone6吧，仍是其餘各類屏幕大小的手機，好比極端一點的iphone 四、iphone 6s plus...各類各樣屏幕大小的手機，難道每一個手機上顯示同樣大小的文字和圖片？那好惱火，因此，咱們要適配！！！瀏覽器

咋個適配呢？

方法就像兵器，各類各樣都有，看你本身根據實際狀況選哪一個，下面是方法：

100%佈局適配
rem作適配
...

先來講rem

開課咯~，聽講聽講~（敲黑板）

仍是來舉個上面相同的例子，假設如今圖上有個寬度100px的按鈕，UI圖是750px的圖。爲了避免同大小的屏幕適配，按鈕咱們應該寫多少rem呢？ rem就是根元素的字體大小！根元素就是<html>標籤。網頁<html>的默認字體大小是 16px。也就是瀏覽器默認的字號16px。

換算方式：1rem = 16px。因此100px = 100 / dpr / 16 = 3.125rem。因此按鈕的寬度在css裏，咱們就應該寫3.125rem。屏幕上按鈕的尺寸跟iphone 6的比例就和UI圖上同樣了。

可是怎麼去改變根字體的大小呢？

一、用@media媒體查詢設置不一樣屏幕的根字體大小，要寫不少css代碼,由於屏幕大小那麼多，難以一一寫全。

二、我推薦寫js，幾行就搞定

下面就是隨着屏幕大小改變根字體大小的js。推薦寫在入口頁面裏，

(function() {
 function autoRootFontSize() {
  document.documentElement.style.fontSize = Math.min(screen.width, document.documentElement.getBoundingClientRect().width) / 750 * 32 + 'px';}
  window.addEventListener('resize', autoRootFontSize);
  autoRootFontSize();
})();
複製代碼

當頁面打開和發生變化時，就會執行resize事件，這裏面用到了getBoundingClientRect屬性（能夠上MDN上查），它其實就是返回一個對象的left、top、right、bottom、width、height，單位爲像素。（請注意兼容問題，IE8及一下沒有width、height）。屏幕寬度和html的寬度取個最小值（其實大部分狀況二者是相同的）。移動端一般是除以32，爲了讓字更大一點，清晰一些。

好啦，根字體隨着屏幕大小而變化啦，那麼不可能每次寫css還要去換算應該寫多少rem吧，那麼多css，要寫哭，因此建議用css預處理器，postcss、less、 sass，若是沒用過，自行查閱其官方文檔。

不要方，其實很簡單......下面就介紹我在工做中用到的。

PostCSS是一款使用插件去轉換CSS的工具。能夠處理CSS，一般是結合webpack這些工具一塊兒使用的。個人項目就是用的webpack，在項目根目錄下建一個postcss.config.js文件，項目會自動去讀取這些配置類文件，這個js裏的內容是：

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 32,
      propList: ['*'],
      minPixelValue: 2
    }
  }
};
複製代碼

這個plugins就是你要用到的插件，好比這裏用到的兩個插件autoprefixer、postcss-pxtorem。

autoprefixer就是給css前面加上合適的前綴，這點少寫了不少行代碼是否是。

postcss-pxtorem就是把px轉換成rem，這也就是咱們上面根字體改變了，px也能夠換算成rem，可是這個插件就能夠根據你的根字體，自動換算rem，是否是很方便。

rootValue就是根字體大小，初始設置爲32，在移動端更清晰一點。

移動端咱們目前就只用到了這2個插件。

上面也說了，要結合webpack使用，那麼在webpack裏應該怎麼寫呢？

module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
      },
      {
        test: /\.css/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      }
    ]
}
複製代碼