px、rpx 、em、rem、vw\vh 用法 与 区别

首先了解一些基础概念

屏幕尺寸：

指的是屏幕对角线的长度，一般用"英寸"来度量 例如：5.5英寸

分辨率的概念：

pc分辨率：1920*1080px;1366*768px等(即指 横着可放1920个像素点)

物理分辨率：生产时屏幕固定 不能改变的

逻辑分辨率：由软件（驱动）决定的

代码参考的分辨率  —  逻辑分辨率

视口：

使用meta标签设置视口宽度，制作适配不同设备宽度的网页，手机屏幕尺寸都不同，网页宽度为100%

pc端：

默认视口宽度==逻辑分辨率宽度=100%

移动端：

不设置视口宽度时，网页宽度为980px

设计师一般参考iphone6/7/8分辨率（网页一般出2倍图） ，软件还会有3,4,5倍图，2倍图的作用，让图片分辨率更高一些，不会模糊失真

物理分辨率：750*1334px 逻辑分辨率：375*667px 比例为2:1

---

px：

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

是你屏幕设备物理上能显示出的最小的一个点，这个点不是固定宽度的，不同设备上点的长度比例会有所不同。

假设：你现在用的显示器上1px宽=1毫米，但我用的显示器1px宽=两毫米，那么你定义一个div宽度为100px，你显示器上看这个div是10厘米，我显示器上看是20厘米。

另外一个px点的长宽不一定是1:1的正方形，有的设备上长宽是不一样的。

rpx：

rpx（responsive pixel）是小程序所独有的尺寸单位，可根据屏幕宽度进行自适应。

规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px=1物理像素

设备	rpx换算px (屏幕宽度 / 750)	px换算rpx (750 / 屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6s	1rpx = 0.552px	1px = 1.81rpx

建议：开发微信小程序时设计师可以用iphone6作为视觉稿的标准

使用步骤：

        1. 确定设计稿宽度 pageWidth

        2. 计算比例 750rpx = pageWidth px.因此 1px=750rpx / pageWidth

        3. 在less文件中只要把设计稿中的 px = > 750 / pageWidth rpx 即可

em：

em是相对长度单位。em相对于父元素。

如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

如果一个 div 有 18px 字体大小，10em 将等同于 180px，即 10 × 18 = 180。

rem：

rem单位是相对于HTML标签的字号（根字号）计算结果，1rem=1HTML字号大小

对于需要适配各种移动设备，使用rem

添加媒体查询：能够检测视口的宽度，然后编写差异化的css样式

可使用flexible.js（淘宝开发）-适配移动端的js框架

原理：根据不同的视口宽度给网页中的html根节点设置不同的font-size

rem布局中，习惯将网页等分成10份，html标签的字号为视口宽度的1/10（方便计算）

1.确定设计稿对应的设备的html标签字号：

        查看设计稿宽度 > 确定参考设备宽度（视口宽度）> 确定基准根字号（1/10视口宽度）

2.rem单位的尺寸：

        rem单位尺寸=px单位数值/基准根字号

vw/vh：

vw/vh ：相对单位，相对于视口的尺寸的计算结果

vw:viewport width  1vw = 1/100视口宽度

vw:viewport height  1vh = 1/100视口高度

对于需要适配各种移动设备，推荐使用vw/vh

1.确定设计稿对应的vw尺寸（1/100视口宽度）

        设计稿宽度 > 确定参考设备宽度（视口宽度）> 确定vw尺寸（1/100视口宽度）    

2.vw/vh单位的尺寸：

        vw单位的尺寸=px单位数值/(1/100视口宽度)

        width:(90px / 3.75vw)

        @vw:3.75vw;

         width:(90 / @vw)                

注意： 全面屏比例会不一样  使用时统一用vw或统一用vh进行计算