HTML学习笔记Day14

一、移动端页面布局

　　1.移动端的屏幕尺寸

　　　　移动端屏幕尺寸：屏幕对角线的长度，单位是英寸（1英寸=2.45厘米）；

　　　　常见的尺寸有：2.4，2.8，3.5，3.7，4.2，5.0，5.5，6.0

　　　　

　　2.屏幕的分辨率

　　　　屏幕分辨率：指横纵方向上的像素点数，单位为px，1px=1像素点；

　　　　一般以纵向像素*横向像素表示一个手机的分辨率；eg：1960*1080

　　　　这里的一个像素是指物理设备的一个像素点

　　3.屏幕像素密度

　　　　屏幕像素密度：屏幕上每英寸可以显示像素点的数量，单位是ppi（pixels per inch）缩写

　　　　屏幕像素密度与屏幕尺寸，屏幕分辨率有关，在单一条件下，屏幕尺寸越小，分辨率越高，像素密度越大，反之越小

　　　　iPhone3GS和iPhone4区别：屏幕尺寸一样，屏幕分辨率相差一倍，屏幕像素密度也相差一倍

　　　　

　　　　PX：像素，将显示器分成非常细小的方格就是1px；

　　　　注：网页重构中使用的px和分辨率的px不一定是一样的大小

　　　　实际上像素分为两种：设备像素和逻辑像素（CSS像素）

　　　　DPR：设备像素比DPR（devicePixelRatio）是默认缩放为100%的情况下，设备像素和css像素的比值

　　　　在早先的移动设备中，并没有DPR的概念。随着技术的发展，移动设备的屏幕像素密度越来越高。从iphone4开始苹果公司推出了所谓的retina视网膜屏幕。之所以叫做视网膜屏幕，是因为屏幕的PPI(屏幕像素密度)太高，人的视网膜无法分辨出屏幕上的像素点。iphone4的分辨率提高了一倍，但屏幕尺寸却没有变化，这意味着同样大小的屏幕上，像素多了一倍，于是DPR = 2

　　4.弹性布局（100%布局）

　　　　特点：顶部与底部的bar不管分辨率怎么变，他的高度和位置都不变；中间的信息都位于左边、右边的位置不会发生变化；

　　　　

　　5.等比缩放布局（rem布局）

　　　　rem（font size of the root element）：根据根元素字体大小的相对单位，默认情况下1rem=16px；

　　　　逻辑像素：当前设备的分布率

　　　　物理像素：当前设计稿的分布率

　　　　因为我们通常情况下都是通过量出当前设计稿的宽度/高度来进行代码的编辑和书写，但是我们在预览的时候都是在当前设备上进行预览，因此就会出现一个倍率，这个倍率我们通常叫做dpr；在用rem布局移动端的时候我们需要在设计稿上量出当前元素的大小然后除以当前的dpr然后再除以更元素字体大小计算出rem

　　　　特点：能够实现强大的屏幕适配布局；能等比例适配所有的屏幕，根据变化html的字体大小来控制rem的大小

　　6.vw布局

　　　　相对于视口宽度或高度的单位，1vw等于当前视口的1%；

　　　　vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%；

　　　　vh：viewpoint height，视窗高度，1vh等于视窗高度的1%；

　　　　vmin：vw和vh中较小的那个；

　　　　vmax：vw和vh中较大的那个；

　　　　vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，Android browser4.4+支持，chrome for android39支持

　　7.用媒体查询设置html的font-size配合rem（设置判断条件的节点）

　　8.通过JS（flexible.js）动态设置html的font-size同样元素单位也要配合rem实现等比例缩放布局

　　　　注：调用js时把移动端设置的meta标签及设置的HTML的font-size删除

　　9.rem结合vw布局

　　　　VW转换成PX赋值给font-size

　　　　例：设备的分辨率为640*1136，逻辑像素为320*568 1VW=3.2px

　　　　　　Font-size:100px;转换成VW font-size:31.25vw;

　　　　　　1rem=31.25vw可一起结合写等比例缩放布局

　　　　使用rem结合vw布局时，iconfont会出现下移的问题，这是因为它自带行高，而跟元素设置的为100px，font-size属性具有继承性， 继承了跟元素的100px，而自身也就带有了100px的行高，需给他设置font-size属性，或者转为块元素，也可以给body设置font-size为16px