优秀程序员web前端技术分享手机页面布局1.弹性布局的特点（100%布局）上下栏无论分辨率如何变化，其height无论中间的每条招聘信息的分辨率如何变化，招聘公司的图标等信息都位于条目的左侧，工资位于右侧。特点：关键元素的高、宽、位置不变，只是容器元素在做缩放变换。对于这类app，最好记住一个开发原则：文字流转、控制灵活、图片按比例缩放。2.屏幕尺寸是多少？手机屏幕尺寸：屏幕的对角线长度，以英寸为单位（1英寸=2.54厘米）。常用尺寸有：2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.03.屏幕分辨率是多少？屏幕分辨率：指的是水平和垂直方向的像素个数，单位是px，1px=1个像素。通常，垂直像素和水平像素代表手机的屏幕分辨率。例如：19601080这里的一个像素是指物理设备的一个像素。4.什么是屏幕像素密度？屏幕像素密度：屏幕上每英寸可以显示的像素数，单位是ppi（pixelsperinch）的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关。单一条件下，屏幕尺寸越小，分辨率越高，像素密度越大，反之亦然。iphone3GS和iphone4的区别：屏幕尺寸一样，屏幕分辨率相差一倍，屏幕像素密度也相差一倍。PX：Pixels，将显示分成非常小的方块，每个方块为1px。注意：（网页重构中使用的px和屏幕分辨率的px不一定是一样大）。其实像素分为两种：设备像素和逻辑像素（CSS像素）DPR：设备像素比DPR（devicePixelRatio）是默认缩放100%时设备像素与CSS像素的比值。在早期的移动设备中，没有DPR的概念。随着技术的发展，移动设备的屏幕像素密度越来越高。从iphone4开始，苹果就推出了所谓的视网膜屏。之所以叫视网膜屏，是因为屏幕的PPI（屏幕像素密度）太高，人的视网膜无法分辨屏幕上的像素点。iphone4的分辨率提高了一倍，但是屏幕尺寸没有变化，也就是说在同样尺寸的屏幕上，像素点的数量增加了一倍，所以DPR=2五、比例缩放布局（remlayout）1.什么是rem?rem(根元素的字体大小)指的是字体大小相对于根元素的单位。2、为什么web应用要用rem？实现强大的屏幕适配布局（淘宝、腾讯、网易等网站都是rem布局适配）rem可以等比例适配所有屏幕，根据html的字体大小控制rem的大小，六、vwvhvw：viewpointwidth，窗口宽度，1vw等于窗口宽度的1%。vh：viewpointheight，窗口的高度，1vh等于窗口高度的1%。vmin：vw和vh中较小的一个。vmax：vw和vh中较大的一个。vw、vh、vmin、vmax：IE9+部分支持，chrome/firefox/safari/opera支持，iOSsafari8+支持，Androidbrowser4.4+支持，chromeforandroid39支持7.Rem配合VW做比例缩放布局1.remrem指的是字体大小相对于根元素的单位。2.如果根元素是相对于设备尺寸的，根元素会自动转换。3、VW窗宽，1vw等于窗宽的1%。4.将VW转PX并赋值给font-size例子：设备分辨率为6401136，逻辑像素为3205681VW=3.2pxFont-size:100px；converttoVWfont-size:31.25vw;1rem=31.25vw可以组合在一起写成比例缩放的布局。8、100%布局（弹性布局）实现方案：采用PX方式，借助弹性盒子实现。九、比例缩放布局(rem布局)1.html{font-size:31.25vw(变量:设计稿);}31.25vw=100px(50px或100px为基本单位(好计算))/3.2px3.2px=320（视口宽度）/100（1vw等于窗口宽度的1%。）元素大小（rem）=原图大小/dpr/100（50px，100px是基本单位（好计算））2、使用mediaquery设置html的font-size配合rem（设置判断条件的节点）3、通过JS动态设置html的font-size，元素单元也需要配合rem实现比例缩放布局。
