先了解一些概念（为了移动端的适配）
因为我们的设备宽度，浏览器视口的宽度，以及我们写的样式的宽度，三者不统一，在移动端呈现出来的页面不好看，所以，为了让移动端的页面好看，
我们制定了一系列的规则；将设备宽，视口宽，我们的样式宽，统一起来 （这个概念叫适配）；
第一步：重要：移动设备宽和浏览器视口的宽保持一致；
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 放head标签里面
我们看到，移动设备的宽和浏览器的宽，很轻松的就一致了，但对于我们写的css样式来说，就是迎合他们的宽度即可
dpr：device pixel ratio（设备像素比） 物理像素 除以 css像素；
ppi：设备像素的密度；
物理像素：手机的屏的显示的最小单元；
css像素：我们web指定的什么屏幕下，对应的像素标准
实际上我们所开发的样式宽就是围绕css像素进行的； 物理像素除以dpr 或者为 设计稿 除以 dpr
设计稿大多数：也是按照css像素 乘以 dpr设计的；
移动端常见的布局方式：
弹性布局：display:flex （该pc端浮动的地方写上display:flex）;
流式布局：100%; (width的百分比布局，与pc端写法一致)；
rem布局：html中的 font-size：属性进行的；（为了更好的适配，提供的一种，弥补了弹性和流式的不足，无需在一个个的调整了）；
rem的插件，更好的解决了这个问题，（无需微整，写好一个页面，所有设备都能很好的适配）
写东西的话，尽量按照设计稿的尺寸走，然后使用rem插件，便可使所有设备匹配，（需要和css像素结合起来看）；