对于移动端总结

　　先了解一些概念（为了移动端的适配）

　　因为我们的设备宽度，浏览器视口的宽度，以及我们写的样式的宽度，三者不统一，在移动端呈现出来的页面不好看，所以，为了让移动端的页面好看，

　　我们制定了一系列的规则；将设备宽，视口宽，我们的样式宽，统一起来 （这个概念叫适配）；

　　第一步：重要：移动设备宽和浏览器视口的宽保持一致；

　　<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）;

　　流式布局：width:100%;　　(width的百分比布局，与pc端写法一致)；

　　rem布局：html中的 font-size：属性进行的；（为了更好的适配，提供的一种，弥补了弹性和流式的不足，无需在一个个的调整了）；

　　rem的插件，更好的解决了这个问题，（无需微整，写好一个页面，所有设备都能很好的适配）

　　写东西的话，尽量按照设计稿的尺寸走，然后使用rem插件，便可使所有设备匹配，（需要和css像素结合起来看）；

转载于:https://www.cnblogs.com/shangjun6/p/10844712.html