移动端适配-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;
    }
复制代码