【转载】移动端布局概念总结

布局准备工做及布局思想及概念:   

1.  一个显示器（pc端显示器 及 手机屏显示器），既有物理像素，又有独立像素（独立像素也叫做css像素，用于前端人员使用）； -->重要
2.  首先肯定设计稿的尺寸，而后在对应的手机屏幕尺寸上进行开发；
3.  设计稿的尺寸（好比320）/16 = 1ren等于多少20px， 而后布局的时候，测量设计稿某个区域的宽度，好比测量的宽度是100px，100px转换为rem的步骤为：100/20 = 5rem（100px 改写成  5rem）；
4.  在写js交互的时候，若是不肯定原设计稿的尺寸的话，则就把任意一个手机屏幕的尺寸当成原设计稿的尺寸便可，好比在苹果5下进行操做。则就当原设计稿的是苹果5屏幕的尺寸。而后在查看下html的字体大小，剩下的该怎么操做，就怎么操做；
5.  为何不一样的的设备，显示的比例是同样，由于尺寸越大，html的font-size越大，尺寸越小，html的font-size越小; 是等比例，也就是1rem在不一样的设备浏览器上等于不一样的像素。、
6. viewport设置的是浏览器可视区窗口的宽度,手机的屏幕宽度不属于浏览器可视区，手机屏幕的宽度和浏览器可视区的宽度不是一个东西； --》重要

           ( viewport ) gif图 详解

           

 

 

浏览器模拟手机参数详解（图解）：

 

 

       

 

    

 

 

 

 

手机屏幕独立像素和物理像素数据库参考图：