一、视口
像素点：物理元件最小的发光单位。
分辨率：就是屏幕像素的数量，比如1600*900，指的是横向有1600的像素点，纵向有900的像素点。
视口：PC端视口宽度在没有缩放时就相当于分辨率宽度。
手机分辨率很大，但为了更好的显示网页效果，将手机宽度设置为980px，而不是像素宽度，这个宽度就是视口。
也就是说，做前端开发的完全没必要关心手机的分辨率。
但是980px对于手机页面来说，也大，所以用meta标签，来设置视口宽度：
1 | <!-- 自定义视口宽度 --> |
一旦设置了，浏览器此时就会认为自己的宽度是400px.此时就会按照400px的宽度来渲染页面。
ppi： pixel per inch 每英尺多少个像素点
电脑的分辨率 / 电脑的ppi = 手机的分辨率（视口宽度） / 手机的ppi
所以任何手机如果想要有显示和计算机一样的宽度，就要根据自己的分辨率、ppi的不同，而设置不同的视口。
如果我们加上：
1 | <!—移动端添加视口约束宽度 --> |
此时每个手机的视口宽度，都是“视口约束宽度”。
每个手机的视口约束宽度不一样，这是为了给人看上去的屋里感觉是一样的：
各个设备约束视口之后的视口宽度（300~400）
你会发现这个宽度都不一样，但是此时人看上去的感觉是一样的。字号是一样大的。
做手机页面的时候，一定要加上：
1 | <meta name="viewport" content="width=device-width"> |
此时如果你写了一个p的字号为14px，不用担心用户能不能看清！此时厂商已经计算好了一个所谓的视口约束宽度。14px的PC端和手机端的感觉完全一样！
一般来说，手机视口约束之后都是320420之间。而分辨率基本都是10001200.也就是说，视口约束之后所谓的1px，实际上手机用了2点多个像素来渲染。手机中的图片，必须使用放大两倍的图片缩小使用，这样能精细。
比如手机上需要10x10的图片，插入的时候就需要20x20的大的原图。
1 | <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport"> |
width=device-width 约束视口
initial-scale=1.0 初始视口倍数是1倍
minimum-scale=1.0 最小允许视口宽度是1倍
maximum-scale=1.0 最大允许视口宽度是1倍
user-scalable=no 不允许用户缩放视口