viewport 是什么
移动端中，分为两个视口：
layout viewport 布局视口: 视口的分辨率接近于 PC 显示器, 也就是 html 的宽度接近于 pc 端的宽度。
visual viewport 视觉视口: 手机的物理可视窗口, 不借助滚动条所看到的内容。
移动设备的 viewport 默认是 layout viewport 可以这两理解，有一个图片(layout viewport)，宽度是：1090 1090，有一个画框(visual viewport)，宽度是：320 460，用户通过画框来看画。当 layout viewport 与 visual viewport 完全一致时，用户通过画框看到的就是整个画。如果 layout viewport 较大，用户需要通过移动画框来查看画面内容。
meta 中的 viewport
viewport 是 meta 中的一个值，通过设置 viewport，可以控制浏览器如何规范的渲染 Web 页面
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
要把当前的 viewport 宽度设为 ideal viewport 的宽度，既可以设置 width=device-width，也可以设置 initial-scale=1，如果 initial-scale 和 viewport 有冲突，浏览器会取比较大的值。
viewport 值:
name
value
Description
width
正整数或 device-width
定义视口 (layout viewport) 的宽度，单位为像素,
height
正整数或 device-height
定义视口的高度，单位为像素
initial-scale
[0.0-10.0]
定义初始缩放值
minimum-scale
[0.0-10.0]
定义缩小最小比例，它必须小于或等于 maximum-scale 设置
maximum-scale
[0.0-10.0]
定义放大最大比例，它必须大于或等于 minimum-scale 设置
user-scalable
yes/no
允许用户手动缩放页面，默认是 yes
分辨率 & 像素
以上所说的宽度，其实是分辨率
什么是分辨率
像素：每张图片都是由色点组成的，每个色点称为一个像素。
屏幕分辨率：是指一块屏幕中画面水平方向的像素值 * 画面垂直方向的像素值。
图像分辨率: 是指每英寸图像内的像素点数。图像分辨率是有单位的，叫 像素每英寸。
设备像素：device pixel
屏幕上的像素。是物理像素。设备像素可能不相同
物理像素不会改变，单位是 pt。
1pt = 1/72(inch),inch 及英寸，而 1 英寸等于 2.54 厘米
举个????：iphone5 的像素：640*1136px，表示：屏幕由 640 行，1136 列像素组成。
CSS 像素：(css pixel)
CSS 像素是 Web 编程的概念，指的是 CSS 样式代码中使用的像素。
举个????：iphone5 的像素：320px。
设置：zoom 100% 的情况下,1 个 CSS 像素才会等于 1 个设备像素
如何计算 css 像素
对于低分辨率设备（绝大部分显示器，手机屏幕），1 个 css 像素相当于最接近参考像素的整数个设备像素。
对于高分辨率设备 (打印机) 来说，1 个 css 像素就是 96 分之一英寸。
设备像素比：DPR
DPR = 设备像素 /CSS 像素。理解：1px 由多少个设备像素组成；如何获取：在移动端浏览器中以及某些桌面浏览器中，window 对象有一个 devicePixelRatio 属性(有兼容问题)，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。CSS 像素就可以看做是设备的独立像素，所以通过 devicePixelRatio，我们可以知道该设备上一个 css 像素代表多少个物理像素。
设备独立像素：DIP
CSS 像素 = 设备独立像素 = 逻辑像素
每英寸像素密度：PPI
一英寸中，像素个数计算：
var 斜边尺寸 = V(1920^2+1080^2) V 代表开根号
var ppi = 斜边尺寸 /5.5
ppi = 401ppi
单位
px
定义：
css 中的单位，是一个抽象概念(抽象概念一定要清楚上下问)。浏览器中都是按照 px 来设置尺寸。
为视频显示的基本单位(来源：wiki)
ps: px 是一个相对单位，相对设备像素的。（css 的像素是根据设备的分辨率计算出来的）。如何感受这个相对值呢？当我们缩放网页大小的时候，并没有改变 css 像素，但是页面中内容变大了，这是因为 css 像素是相对的，其他因素的改变，影响了 css 像素的大小。
计算：为了让相同的 1px 在不同的设备上，视觉上看起来差不多，css 像素是根据设备像素大小换算出来的。css 中，根据参考像素进行换算
em
计算：使用 em 单位的元素的字体大小乘以 em 值，父元素大小会影响 em，是因为继承的原因, 如果出现层级 em 嵌套，会影响比较大。
rem
计算：取决于页面根元素大小，根据根元素字体大小乘以 rem 值。
retina 视网屏幕：Retina 显示器指的是在人体正常使用距离下，无法看到屏幕的像素。
1px 问题
为什么会有这种问题？
设计师的 px 指的是物理像素，我们设置的是 css 像素，物理像素和 css 像素不是完全一致的。
如何解决
小数
.border {border: 1px solid #999}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border {border: 0.5px solid #999}
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border {border: 0.333333px solid #999}
}
问题：兼容性不是很好
tranform 加伪类标签
<span class=”border-1px”>1 像素边框问题 </span>
// less
.border-1px{
position: relative;
&::before{
content: “”;
position: absolute;
left: 0;
top: 0;
width: 200%;
border:1px solid red;
color: red;
height: 200%;
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transform: scale(0.5);
transform: scale(0.5);
pointer-events: none; /* 防止点击触发 */
box-sizing: border-box;
@media screen and (min-device-pixel-ratio:3),(-webkit-min-device-pixel-ratio:3){
width: 300%;
height: 300%;
-webkit-transform: scale(0.33);
transform: scale(0.33);
}
}
}
优点: 其实不止是圆角, 其他的边框也可以这样做出来缺点: 代码量也很大, 占据了伪元素, 容易引起冲突
阴影
.border-1px{
box-shadow: 0px 0px 1px 0px red inset;
}