为了使页面适配不同分辨率下的设备，就不能使用固定单位，需要使用相对单位rem和vw单位动态控制页面尺寸大小

逻辑像素与物理像素

px全称为pixel，像素长度，像素长度，那么就请问了，一个超大屏幕的像素和你笔记本或者手机屏幕的像素大小相同吗？也就是说1px在你手机屏幕上显示出来的长度可能为0.1mm，在露天演出的电子屏幕上长度为5cm，那么0.1mm和5cm相等吗？

感觉px好像是一个相对单位，但是如果放在网页或者设计人眼中，可能就不一定了，上面举得那个例子是物理像素，在物理像素的背景下，px确实是一个相对单位，但是在逻辑像素上就不同了，css中1px指的是逻辑像素，浏览器会将你的逻辑像素转化成物理像素，每个设备之间虽然物理像素点大小不一样，但是用例逻辑像素的单位后，显示的长度就会一样了。

在开发网页的时候，写了10px，在你的设备上，逻辑1px为真实的1.2个像素大小，实际看上去为10cm，没问题，换一个设备，逻辑1px为真实的2.4个像素大小，也就是说另外一个设备像素大小是你的设备一半，那么对于他来说10px就是24个像素了，但是实际大小仍然为10cm，所以说，在有逻辑像素的概念的前提下，px是一个绝对长度单位。

逻辑像素：CSS中的像素，绝对单位，保证不同设备下元素的尺寸是相同的。
物理像素：设备屏幕实际拥有的像素点，相对单位，不同设备下物理像素大小不同。

viewport视口

一般移动设备的浏览器都默认设置了一个viewport元标签，定义一个虚拟的布局视口（layout viewport），用于解决早期的页面在手机上显示的问题。iOS, Android 基本都将这个视口分辨率设置为 980px，所以PC上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。
图片描述

默认viewport

上面截图中的方块为100px，但是在iphone6设备的默认视口下显示的非常小，因为默认视口为980px。为了解决这个问题，可通过meta标签来修改视口的尺寸大小（vsCode工具初始创建HTML代码时，自动添加）。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
复制代码

width=device-width表示视口宽度为设备的宽，也就是逻辑像素的大小。initial-scale=1.0表示初始缩放比例为1，即正常大小。下面是设置了viewport视口后的样子。
图片描述

设置viewport

viewport可选的值有：

属性	值	描述
width	正整数或devive-width	定义视口的宽度，单位为像素
height	正整数	定义视口的高度，单位为像素，不常用
initial-scale	比例值	定义初始缩放值
minimum-scale	比例值	定义缩小最小比例
maximum-scale	比例值	定义放大最大比例
user-scalable	yes/on	定义是否允许用户手动缩放页面，默认值yes

总结：

在移动端布局中，一定要提前设置好视口大小，即vsCode默认添加形式，<meta name="viewport" content="width=device-width, initial-scale=1.0">，这样可以保证CSS逻辑像素不会受到缩放处理。

750像素设计稿

通常移动端UI设计稿会按照iphone6的物理像素尺寸大小进行设计，即750px。当然也可以按照逻辑像素进行设计，即375px，但是一般设计师不会这么干，主要为了设计稿更加清晰。

所以前端在量取尺寸的时候，需要除以2，才能适配页面中的CSS逻辑像素值图片描述

那么如何让唯一的一种设计稿尺寸，去适配不同设备的像素呢？让页面元素能够等比进行放大缩小呢？可通过rem和vw这两种相对单位来进行实现

总结：

移动端UI设计稿尺寸大小为750px，即设备的物理像素，可使效果展示更加清晰。

移动端需要实现像素换算和设备适配，以及页面元素等比缩放布局等。

移动端rem布局原理

同一个页面在不同的设备下，如果页面中的元素都做成等大的，那么就会被拉伸、不成比例。如何让页面在不同的设备下整体上感觉大小是相同的呢？就需要等在小点的设备上等比缩小或者在大一点的设备上等比放大，如下图所示

所以就不能使用px作为单位因为它是固定单位，这就需要使用类似rem这样的相对单位，同一个rem值在不同的设备下换算出的px是不同的

em单位

1em = 当前容器下的font-size大小(默认16px)，如果一个div的font-size大小写的单位是em，那么它就会去找它的父元素的font-size 去换算成px

rem单位

1rem = 根节点html标签设置的font-size大小，同元素所在容器font-size无关、body容器的font-size无关

如果当前页面为在设备iphone6下的html的font-size为30px，页面在iPhone 6 plus 打开时如果可以动态的修改页面html下的font-size的大小,那么页面中所有使用rem作为尺寸单位的元素就可以跟着变化了，这样只要修改html下的font-size大小，就达到了一个页面在不同设备下的适配了

示例1

动态计算font-size

利用vw/vh相对单位，动态计算font-size

vw 和 vh

页面将可视区分成了100个vw和100个vh

如下图所示，将宽高设置成50vw和50vh，可见vw就是一个参照可视区域大小的相对单位

如何利用vw进行换算呢？

当在页面中设置样式,发现在不同设备尺寸下font-size的大小是在变化的

html{ font-size: 100vw; }

在iphone6设备下，为了方便最后转成rem更加容易，font-size不要设置成100vw(375px)，font-size设置的大小最好是让1rem = 100px，那么font-size 需要设置成多少个vw呢？

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html{
      /* font-size: 100vw; iphone6 -> 375px */
      font-size: 26.666667vw; /* iphone6 -> 100px */
    }
    body{
      font-size: 0.16rem; /* 一定要在body重置字体大小 */
    }
    .box{
      width: 1rem; 
      height: 1rem;
      background: pink;
    }
  </style>
</head>
<body>
  <div class="box">
    哈哈
  </div>
</body>
</html>
复制代码

在iphone6设备下1rem = 100px

在iphone6 plus下1rem = 110.4px

这样就达到了动态的设置html的font-size的目的,也就间接的影响到了rem转成px的最终结果，也达到了依据不同的设备尺寸，等比的适配的结果

示例2

这样通过中间的媒介相对单位vw，在html中将font-size计算成了100px作为换算的值，也间接的将rem转成了100px，但是在使用rem作为单位的时候还是要再将设计稿中的px尺寸和rem做一层计算(px / 100 = rem),这样还是太麻烦了，有没有更好的办法？

测量rem数值及插件使用

vsCode工具中px to rem 插件

接着我们一次性将全部的单位写成px，最后全选按ALT + Z就可以一次将px转成rem单位了
在html中设置font-size大小

   html{
      font-size: 26.666667vw; /* iphone6 -> 100px */
    }
复制代码

如果拿到的是二倍稿，我们想要拿到一倍稿的尺寸，ps中量取的数值是物理像素，css中设置的是逻辑像素，所以量取的值进行除以2，然后再进行rem转换

建议最好使用pxcook导入psd(figma可以导出sketch文件再用工具转成psd文件)，可以先转成一倍稿的尺寸，再转成rem单位(基数设置100，取整改为三位数)

pxCook新建项目的时候选择web项目

总结

在iphone6 尺寸下设置html标签字体大小： font-size: 26.666667vw: 此时，1rem = 100px
在iphone6原型设计稿中量取尺寸(如果原型设计稿的宽度是750像素，量取的尺寸需要除以2,最后再将它转成rem)
在vsCode中使用px书写样式，最后使用vsCode工具中 px to rem 插件，选中所有样式，按快捷键Alt + Z，将px全部转成rem单位

移动端vw布局及插件使用

思路

如果是在iphone6的屏幕尺寸下(375px)，100vw = 375px,那么，1vw = 3.75px; 如果是在iphone6 plus屏幕尺寸下(414px),100vw = 414px，那么，1vw = 4.14px; 这样使用vw相对单位就可以实现页面在不同设备下的是等比缩放和适配，用起来比rem方便，它与font-size 无关

那么我们如何将vw和px快速转换呢？

推荐使用vsCode工具中的px-to-vw插件

如果是将一倍设计稿下的px转成vw，只需要下面这样设置一下,全选样式按快捷键Alt + V 就转成vw相对单位了(快捷键可以自行设置)

还有一种方法：将psd文件放到pxcook，就可以将px转成vw数值

移动端适配布局