rem的用法(以及在移動端是使用)

在開發移動端的很多時候，px作爲單位已經無法滿足客戶的需求，rem做到的完全適配瀏覽器大小已經很成熟了，這裏我寫下這個爲了給自己留個筆記吧！

rem的用法
rem 相對於根元素字體大小的單位，它是一個相對單位。

通常可以有兩種方法，第一種是結合媒體查詢來做。 第二種是 js 方法。

一：媒體查詢：
使用媒體查詢，來控制不同屏幕下的html的字體大小即可。

假如一個需求：有個設計圖750，在這個圖紙上有個div，量出來是 :200px * 200px;
首先我們可以考慮將750的設計稿分爲15份（當然那也可以分成10份，這個隨意，我爲了好計算。）， 即要把屏幕分成 ：750px = 15rem；
那麼就是：750的屏幕 ：1rem = 50px ; font-size = 50px;
以此內推：480的屏幕：1rem = 480 / 15 = 32px ， font-size= 32px ；
350的屏幕：1rem= 350 / 15 = 23.33px ，font-size= 23.33px ；
320的屏幕：1rem= 320 / 15 = 21.33px ，font-size= 21.33px ；

@media( width:750px) { 
   html {
   font-size:50px;
   }
}
@media( width:480px) { 
   html {
   font-size:32px;
   }
}
@media( width:350px) { 
   html {
   font-size:23.33px;
   }
}
@media( width:320px) { 
   html {
   font-size:21.33px;
   }
}

以上就是配合媒體查詢的寫法。

二：js的寫法。

原理就是根據屏幕尺寸用 js 來設置html的 font-size;

注意：這段script代碼放在你的html上面，因爲先修改html的字體大小，再加載頁面不然會出現頁面閃爍！！！

function  responsive() {
//屏幕的寬度
var screenWidth =  window.innerWidth || document.documentElement.clientWidth;

if ( screenWidth <=320) {
	screenWidth  = 320;
	 }
 if ( screenWidth >=750) {
	screenWidth  = 750;
	 }

//希望把設計圖分爲15 rem ， 750的 設計；
var count = 15；
//設置html的字體大小； toFixed(number)  是保留幾位小數
document.documentElement.style.fontSize = (sceenWidth / count ).toFixed(1) + 'px'  ;
}

//初始化加載調用
responsive(）;

//監聽屏幕變化調用
window.addEventListener('resize',function() {
responsive(）;
})

以上就是用rem來實現的瀏覽器設配啦。

三 postcss-px2rem-exclude+lib-flexible實現rem開發

首先你得安裝

 npm install lib-flexible --save

在main.js裏引入進來

import 'lib-flexible/flexible.js'

注意：
1.檢查一下html文件的head中，如果有 meta name="viewport"標籤，需要將他註釋掉，因爲如果有這個標籤的話，lib-flexible就會默認使用這個標籤。而我們要使用lib-flexible自己生成的 meta name="viewport"來達到高清適配的效果。
2.因爲html的font-size是根據屏幕寬度除以10計算出來的，所以我們需要設置頁面的最大寬度是10rem。
3.如果每次從設計稿量出來的尺寸都手動去計算一下rem，就會導致我們效率比較慢，還有可能會計算錯誤，所以我們可以使用px2rem-loader自動將css中的px轉成rem

第二部分：使用postcss-px2rem-exclude自動將css中的px轉換成rem
注：之前使用過px2rem-loader ，但是發現在使用第三組件庫的時候，組件的樣式並沒有生效，
然後我看到文章 postcss-px2rem-exclude 。詳細寫了；

npm install postcss-px2rem-exclude --save

使用postcss-px2rem-exclude，網上好多說用這個方法不起作用，經過一個下午的折騰才發現是使用方法不對，我的錯誤方法就不跟你們說了，直接來正確的。

首先，需要卸載項目中的postcss-px2rem。

npm uninstall postcss-px2rem --save-dev

其次，安裝postcss-px2rem-exclude

最後是配置exclude選項，需要注意的是這個配置在vue.config.js中式不起作用的，如圖。

正確的配置位置是項目根目錄下的postcss.config.js文件，如果你的項目沒有生成這個獨立文件，就需要在你的.postcssrc.js裏設置。

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-px2rem-exclude":{
          "remUnit": 75,
          "exclude":"/node_modules|floder_name/i"
      }
    }
  },

最後別忘了把之前配置過的信息刪掉。在build-utils.js下，如圖：

以上就是我這個項目的填坑經歷，希望對你有用，能少走點彎路 o(^＠)o