UI设计稿中常见的单位及移动端适配

一、pt

在我们的设计稿中，经常看到以pt单位来标注的稿子，那么pt究竟是个什么单位？其实pt是用于印刷行业用来表示字体大小的单位，也叫做磅，用过word设置字体的应该不会陌生，它是一个绝对长度，为1/72英寸。

与我们常用的单位px相比，最大的不同是，px是一个相对的单位，也就是说在不同的DPI的屏幕上，同样为14px的实际大小会不同。

pt和px转换

1pt = 1/72Inch 1Inch = DPI * 1px => 1pt = DPI/72px

windows中默认DPI = 96，所以windows上1pt = 4/3px
同样在mac上，我们来做一下对比

.p1 { font-size: 12px;}
.p2 { font-size: 12pt;}

这是px
这是pt

在mac上也是1pt = 4/3px

二、em

em是一个相对的度量单位，对于浏览器来说，1em=16px，16px为浏览器的默认字体大小。
而且em是随父元素的大小变化而变化，举例：

.p1 { font-size:18px;}
.p2 { font-size: 1em;}

这是px
     这是em

另：在测试时，父元素和子元素都是p标签，em就不会随父元素的单位大小变化而变化。原因未深究。

三、rem

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。rem和em它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

3.1、1rem等于多少px

rem是相对根元素的字体大小单位，要知道1rem等于多少px，首先要知道根元素值；默认状态下，浏览器的默认文字大小为16px；所以1rem默认情况下就等于16px

3.1、为了容易计算rem的值，将根元素设置为62.5%(10px)

因为默认状态下，浏览器的默认文字大小为16px，16*0.625=10px，这样就有1rem=10px，用到数值就很容易计算。例如需要20像素的宽度，则可以设置为width:2rem; 这样设置的好处是便于处理响应式布局，只需要根据需要调整根元素的font-size就可以直接对所有rem相对单位的属相关元素同时调整。

3.2 rem.js 来解决适配问题

事实上 rem.js 是把屏幕等分成 20 份，每份为 1rem ， 1rem 对应的大小就是 rem基准值 ，rem.js 做的就是把 rem基准值 给html的 font-size ，所以如果设备的 物理像素 宽为 640px，那么 1rem=640px/20=32px , html的 font-size为32px 。
在我们实际切图的时候，对于视觉稿上的元素尺寸换算，只需要元素的原始的px值(即你量的大小)**除以 *rem基准值即可。例如设计稿的大小为640px， rem基准值 = 640px/20 = 32px ，有个元素的大小你量出来是 140px286px ，那么换算过来就是：

140px = 140/32 = 4.375rem
286px = 286/32 = 8.9375rem

3.3、vue 中使用rem布局

在用vue或react等工具搭建一个移动端项目时,怎样做到自适应呢? 当然选择rem布局比较方便快捷. 此处已vue为例,在使用vue-cli搭建好项目框架后,在目录结构的index.html文件中添加一段js代码:

fnResize();
window.onresize = function () {
  fnResize();
}
function fnResize() {
  var deviceWidth = document.documentElement.clientWidth || window.innerWidth;
  if (deviceWidth >= 750) {
    deviceWidth = 750;
  }
  if (deviceWidth <= 320) {
    deviceWidth = 320;
  }
  document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px'; 
}

然后在写css就可以将px单位换成rem. 这里设置的比例是100px=1rem, 例如:宽度为100px时,可以直接写成1rem

四、最新的移动端适配方案

vw

这个vw的方案，相当而言还比较新。vw 即（viewport width）可视窗口的宽度。之所以把这个方案放在后面来说，是因为viewport在去年（2017年）的时候存在不少的兼容性问题，各个浏览器的支持并不是很好。但是来到了2018年这个时间点，viewport单位意见得到了众多浏览器的支持（80.45%）。

vw既然是一个尺寸单位，那它的宽度等于多少呢？等于1%整个屏幕的宽度。举个例子，再次以iphone6手机为例，100vw = 750px => 1vw = 7.5px

1.根据定义，我们了解了在iphone6手机上 1vw = 7.5px
2.此时手机号的输入框为 490px = 65.333333vw
3.依次将页面上的px转换为vw，这样我们就得到了全是vw为尺寸单位的页面