移动web开发是指针对手机、平板电脑等移动设备的web开发。
分辨率(resolution，又称解析度)指显示器所能显示的像素的多少，显示器可显示的像素越多，画面就越精细。
物理像素也称设备像素是屏幕的最小物理单位；
物理像素并不一定是一个小正方形区块，也没有标准的宽高；
只是一个由由红、蓝、绿三原色组成的一个“点”而已；
“2532 x 1170 分辨率”指的就是物理像素，表示屏幕水平有1170个物理像素点，垂直有2532个物理像素点。
CSS像素又称为虚拟像素、设备独立像素或逻辑像素也就是web开发中使用的像素（px）。
物理像素是屏幕显示页面效果的最小单位；
CSS像素是web开发中使用的像素；
在不同分辨率的屏幕下，由多个物理像素对应一个CSS像素，实现在不同分辨率的屏幕下显示相同的页面效果。
设备像素比 = 物理像素 / CSS像素
dpr = 2 意味着一个CSS像素需要用2*2个物理像素来绘制；
使用window.devicePixelRatio属性可获取dpr
注意
放大和缩小改变的是CSS像素；
ppi (pixels per inch)：图像的采样率 （在图像中，每英寸所包含的像素数目）；
dpi (dots per inch)： 打印分辨率 （每英寸所能打印的点数，即打印精度）；
都表示屏幕每英寸所拥有的像素数量；
PPI计算公式： 对角线像素个数 / 屏幕尺寸
viewport 是用户网页的可视区域。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
使用meta 标签设置Viewport;
<!-- name="viewport" 设置 viewport-->
<!-- width=device-width 告诉浏览器将视口宽度设置为设备宽度 -->
<!-- initial-scale=1.0 初始缩放比例 -->
<!-- content="width=device-width, initial-scale=1.0" 兼容写法 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
除了上述的设置，content还可以设置maximum-scale、minimum-scale、user-scalable。
注：user-scalable很多浏览器不支持设置user-scalable
通过document.documentElement.clientWidth 属性或 window.innerWidth属性可以获取当前视口宽度，为了保证兼容性将两种方法都写document.documentElement.clientWidth || window.innerWidth。
通过查询当前属于哪种设备, 让网页能够在不同的设备下正常渲染显示。
/* and 表示 && screen 和 (min-width: 900px) 都满足时样式才有效*/
@media screen and (min-width: 900px){
body{
background-color: #fff;
}
}
and（&&）；， (||)；not （！）；only （在不支持媒体查询的浏览器中不添加样式）； @media screen and (min-width: 900px),screen and (max-width: 1200px){
body{
background-color: #fff;
}
}
注意：或后面要写媒体类型，没写媒体类型默认值为 all
@media (-webkit-device-pixel-ratio:2){
body{
background-color: #fff;
}
}
PC优先
@media screen and (max-width:1200px){
}
@media screen and (max-width:992px){
}
@media screen and (max-width:768px) {
}
@media screen and (max-width:576px){
}
移动优先
@media (min-width: 576px) {
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
@media (min-width: 1200px) {
}
px绝对长度单位，也就是我们实际开发中最常用的单位。
em是相对长度单位，相对于自身的font-size属性进行计算；
如果当前元素未设置font-size属性，则从父元素上继承fontsize属性。
<div>
<p>em</p>
</div>
html{
font-size: 14px;
}
div{
font-size: 15px;
}
p{
font-size: 20px;
line-height: 1em;
}
1em * 20px = 20px
rem是CSS3新增的一个相对长度单位，相对于根元素（html）的font-size进行计算。
<div>
<p>rem</p>
</div>
html{
font-size: 14px;
}
div{
font-size: 15px;
}
p{
font-size: 20px;
line-height: 1rem;
}
1rem * 14px = 14px
vw表示视口的宽度，1vw表示视口宽度的1%；
vh表示视口的高度，1vh表示视口高度的1%；
兼容性不好，不常用；