移動端適配-REM

屏幕分辨率

像素

咱們能夠用紅藍綠能夠調配出任何顏色,咱們常說的手機像素就是由許多紅藍綠組成的一個小塊,1個小塊表示1個像素.

上圖,橫向有7個小塊 縱向有7個小塊,表示7*7像素.

iPhone8的分辨率爲 1334*750像素表示,橫向750個像素,縱向1334個像素

PPI <像素的密度>

屏幕尺寸與分辨率 通過計算後的值.喬幫主說PPI超過326的就叫作視網膜屏.

iPhone8 PPI

Retina屏幕與普通屏的差異

Retina屏幕單位內像素越比普通像素屏幕多.例如iPhone3與iPhone4的像素 (960 * 640) / (480 * 320) = 4

由於在尺寸沒有改變的狀況下.物理像素增長.所以css中的1px並不能等於設備的1個物理像素.

目前主流的作法是用devicePixelRatio的比例來表示1個css等於都是多少物理像素點.

設備像素比devicePixelRatio

物理像素/邏輯像素 devicePixelRatio爲2時,1px = 2個物理像素

物理像素.屏幕物理材料上橫向與縱向有多少個像素點 邏輯像素.程序認爲屏幕上橫向與縱向有多少個像素點

css中的px能夠看作是邏輯像素,經過比例能夠知道1px表明多少物理像素.

@2x與@3x

網頁展現一張圖片: width: 100px. height: 100px.

iPhone 3GS:一倍屏,圖片的一個像素須要一個物理像素展現.100px * 100px的圖片才能發揮全部的物理像素.

iPhone 4: 二倍屏, 圖片的一個像素須要2個物理像素展現,200px * 200px的圖片才能發揮全部的物理像素（清晰+1）.

iPhone 7 Plus: 三倍屏, 圖片的一個像素須要3個物理像素展現,300px * 300px的圖片才能發揮全部的物理像素（清晰+2）.

viewport

瀏覽器上用來顯示網頁的區域.可是viewport不限於瀏覽器可視區域的大小,它可能比瀏覽器的可視區域要大或小.

移動設備上的分辨率相對於桌面對比,都略小.所以爲了能正常顯示PC端的頁面,移動端瀏覽器會默認viewport的寬度設爲980px或1024px.

layout viewport、 visual viewport 、ideal viewport

目前移動瀏覽器的寬度大多比桌面瀏覽器上的寬度要窄,所以桌面上的網站放在移動設備上時.會由於viewport太窄,而擠成一團, 雖然目前移動設備上的分辨率都比較大(768 * 1024)、(1080 * 1920)可是由於屏幕尺寸沒有增長,所以須要CSS中的1px表明更多的物理像素,才能讓1px的東西在高分辨屏幕上與低分辨率上都能正常顯示. 所以瀏覽器決定在默認狀況下把viewport設置成一個較寬的值（默認說980px）, ppk大神把這個瀏覽器默認的viewport 叫作layout viewport.可經過 document.documentElement.clientWidth獲取.

layout viewport的寬度是大於移動端瀏覽器可視區域的寬度,所以咱們還須要一個viewport表示可視區域的大小,ppk大神將此稱爲visual viewport 可經過window.innerWidth 來獲取.

隨着愈來愈多的網站都會爲移動設備進行單獨的設計,所以須要一個不須要用戶縮放和滾動條就能正常查看網站全部內容的適配,ppk大神將此稱爲idea viewport《每一個設備網頁的理想寬度》

移動端下1px

高清屏下，移動端下的1px會很粗。在三倍屏下，一個像素實際上有三個物理像素，因此看起來就會很粗，咱們須要縮放到原來大小的1/3 纔可以看到佔用1個物理像素的一條線。能夠 設置viewport的scale值來解決。

對於二倍屏，如iPhone 7

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5,
minimum-scale=0.5, user-scalable=no">
複製代碼

對於三倍屏，如iPhone 7 Plus

<meta name="viewport" content="initial-scale=0.3333333333333333,
maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333,
user-scalable=no">
複製代碼

移動端REM方案

設置viewport的scale值爲1。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

width屬性控制視口的寬度.能夠像width=600這樣設爲確切的像素數，或者設爲device-width這一特殊值來指代比例爲100%時屏幕寬度的CSS像素數值,initial-scale屬性控制頁面最初加載時的縮放等級,maximum-scale、minimum-scale及user-scalable屬性控制容許用戶以怎樣的方式放大或縮小頁面
複製代碼

根據屏幕的分辨率動態設置html的文字大小，達到等比縮放的功能。

例如在scale爲1時,設計稿寬度爲750, 把設備寬度10等分,在iPhone6/7/8上.html的font-size爲37.5px.此時1rem=37.5px

scale爲1在2倍屏下 750/2 = 375 
將設計稿10等分 375/10 = 37.5
1rem = 37.5px
複製代碼

設置rem

// 將設備的寬度10等分
function setRem() {
        var scrren = document.documentElement.clientWidth || 320
        document.getElementsByTagName('html')[0].style.fontSize = scrren / 10 + "px"
    } 
    
複製代碼

sass

// 設計稿寬度
    $phoneWidth : 750;
    // 計算每一個等分的縮放比例 * 10
    @function px2remP( $width ){
      @return $width / $phoneWidth * 10rem;
    }
複製代碼