移动端适配-REM我们可以用红蓝绿可以调配出任何颜色,我们常说的手机像素就是由许多红蓝绿组成的一个小块,1个小块表示1个

屏幕分辨率

像素

我们可以用红蓝绿可以调配出任何颜色,我们常说的手机像素就是由许多红蓝绿组成的一个小块,1个小块表示1个像素.

上图,横向有7个小块纵向有7个小块,表示7*7像素.

iPhone8的分辨率为 1334*750像素表示,横向750个像素,纵向1334个像素

PPI <像素的密度>

屏幕尺寸与分辨率经过计算后的值.乔帮主说PPI超过326的就叫做视网膜屏.

PPI = \dfrac{{\sqrt{长度像素^2 + 宽度像素^2}}}{屏幕对象线英寸数}

iPhone8 PPI

\dfrac{\sqrt{1334^2 + 750^2}}{4.7} = 325.612

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;
    }