前端移動端適配方案之rem之小白解惑

移動端適配-rem:

認識移動端

作適配方案以前先認識下移動端,熟悉移動端和pc端的區別和特色,才能真正理解作適配的精髓,這裏就簡單介紹下;css

網上找不到主流android設備的數據表,就以iphone爲例:
圖片描述html

以iphone6爲例:
豎屏寬爲375,叫作邏輯像素(有的地方叫獨立像素);
豎屏寬的像素750,叫作物理像素,是設備實際的光點個數,要知道屏幕都是由一個一個光點組成的;
像素比(Asset)2x,就是2倍,物理像素/邏輯像素;
ppi:像素密度326,實際平方英寸的光點個數;值越高畫面越細膩,但對cpu和電池等硬件要求就越高;ppi超過163的屏幕蘋果公司起了個洋氣的名字,叫視網膜屏;前端

邏輯像素和物理像素的概念須要消化消化,css中的px對應的其實是邏輯像素,好比這裏寫個width:375px,是能夠鋪滿橫向的iphone6;vue

特別提醒,這裏全部的有關像素的概念都和實際的尺寸(英寸)沒有多大關係。(好比iphone6的375就比一些android的360看上去還要窄一些。)android

pc端沒有這麼複雜的像素比關係,什麼都是1:1:1;webpack

搞明白這些像素的關係,問題就來了,怎麼在css中寫1個尺寸,就能讓全部尺寸和像素比的設備都飽和展現,好比上面說的375px,屏幕橫過來是否是就只佔手機一半的位置,換個320寬的手機是否是就溢出了,有滾動條了;web

認識單位rem

簡單介紹下rem和px的換算關係:1rem=html的font-size;
好比:html{font-size:100px},那麼1rem就等於100px;npm

方案就出來了,全部單位使用rem,咱們動態改變html的font-size;sass

實施rem方案

思路就是(一遍看不清楚,把下面的例子理解了再看一遍思路):先有一個基準,好比375的iphone6,(爲何拿375說事,上面已經提到,咱們寫的css樣式實際上只和邏輯像素有關,至於手機用幾個光點去渲染是它的事.)將html的font-size設置成容易計算的值好比100px,頁面初始化 和 尺寸發生變化 的時候獲取屏幕的寬度(document.body.clientWidth)就行了,而後用這個值除以375,得到一個比值,去乘以100px,最後獲得的值來替換html的font-size。less

html的font-size=(屏幕寬/375)*100+'px';

例如iphone6,body:{width:3.75rem};
豎屏的時候:html{font-size:375/375}*100+'px',body寬就是3.75*(375/375)*100=375px,鋪滿了吧;
把屏幕橫過來:html{font-size:667/375}*100+'px',body寬3.75*(667/375)*100=667px,又鋪滿了吧;
實力總結

目前移動端ui的設計稿都是按375的iphone6來設計的,大可能是2倍圖,是爲了展示更細節的東西,就是750px寬的psd圖,在前端設計適配方案的時候就能夠用375對應100px的方式來作,全部尺寸css寫psd上的一半就好;

rem的適配方案肯定按如下幾個步驟實施:
1.肯定設計稿尺寸,375倍數仍是320倍數;
2.在公共js中添加方法:

var doc=document.docementElement;//減小dom操做
resize(){
    //獲取dom文檔寬
    var clientWidth=doc.clientWidth,
        htmlFontSize=doc.style.fontSize;
        //動態改變html的font-size,以320爲例
        if(clientWidth<320){//設置邊界值以防萬一
            htmlFontSize=‘100px’;
        }else(){
            htmlFontSize=clientWidth/320*100+'px';
        }
}
//檢測屏幕尺寸變化同步font-size,如橫豎屏切換時觸發
window.onresize=function(){
    resize()
};
//頁面初始化時觸發
resize()

3.css中全部的樣式單位爲rem,包括文字的大小,換算關係以下:
如:設計稿尺寸爲640,font-size爲20px,那麼全部尺寸除以2,
{width:3.2rem;font-size:0.1rem;}
如:設計稿尺寸爲320,font-size爲20px,那麼body{width:3.2rem;font-size:0.2rem;}
如:設計搞爲375,那麼resize()方法中的320要換成375,css寫成body{width:3.75rem;font-size:0.2rem}

特別提醒:這樣的適配在pad橫屏展現超級大,因此仍是要根據業務需求設置臨界值;
移動端圖片適配除了rem的尺寸還要根據不一樣尺寸設備更換2倍圖和3倍圖,好比pad上展現3倍圖就會更清晰,通常方案是用media媒體查詢更換背景圖;

rem的缺陷
最近在作開發的時候遇到rem的一個大坑,就是若是用戶改變了手機的字體大小,並且咱們的頁面樣式的寬用了rem,好比{width:1rem},那麼頁面的寬就會成倍增加,致使頁面亂掉。。。還沒找到辦法解決,寬度仍是先避免使用rem的好。
webpack自動化 代碼仍是寫的px,打包後輸出rem,有好處,也有壞處,本身琢磨;
第一步安裝 npm install postcss-px2rem postcss --save

第二步 在 webpack.base.conf.js中 引入

const webpack = require('webpack') 
const px2rem = require('postcss-px2rem') 
const postcss = require('postcss')

第三步 在module中添加以下代碼

plugins: \[ new webpack.LoaderOptionsPlugin({ 
vue: { 
      postcss: \[require('postcss-px2rem')({ 
      remUnit: 75, propWhiteList: \[\] })\] }, 
      }) \],

第四步 在rules中加以下代碼,css我是用到sass,因此須要引入對應的loader,不須要的可不寫。

{ test: /\\.(css|less|scss)(\\?.\*)?$/, 
  loader: 'style-loader!css-loader!sass-loader!less-loader!postcss-loader' }`
相關文章
相關標籤/搜索