一行 mco ron 好的 str content 图像 row
1.先谈一下几个概念 像素是度量的单位,可以理解为点 1.CSS像素 html中度量的单位 用px来计算,在pc中往往 1 css px = 1 物理像素 在不同设备中1css像素对应不同的设备像素(物理像素) 例如:iphone3分辨率是320*480 即 css 1px = 1个物理像素;iphone4 分辨率640x960但屏幕尺寸没有改变,意味着同一块区域像素多了1倍 即 css 1px =2个物理像素; 2.物理像素 表示每英寸所拥有的像素数目,数值越高,代表屏幕能够以更高的密度来显示图像 3.分辨率 显示器所能显示的像素多少,显示器可以显示的像素越多,画面就越精细,同样的屏幕区域能显示的信息就越多 4.PPI :是每英寸所拥有的像素(Pixel)数目2.css那些单位 px:绝对单位,页面按精确像素展示 100%:不是固定的,根据父元素决定的 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。 rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持。 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支持3.哪种方法更适合来屏幕适配呢? 1.px? 不好用是因为不管在哪都是一样的值,所以造成很大的差别,比如font-size:14px,pc的14px比手机的14px要大 2.100%? 百分比布局时:div结构自适应,字体却不能适应,不好用 3.em?em等于当前元素下字体的大小 不好的地方是改一处就会造成乱了 4.vw,vh虽然很好用但是目前浏览器支持不老老高。 5.综合以上这里推荐rem,根据屏幕的宽设置rem,当屏幕变大,所有随之改变。 rem适配攻关点: 1.获得当前屏幕的大小 2.设置html的fontsize即rem 3.当屏幕大小改变,触发函数重新计算4.用到的关于代码: 获取当前屏幕的大小用: 1、若网页中含有有了标准声明(即页面加上这行代码,标准声明的存在会对document.body和document.documentElement的属性值有影响)时, 则应该使用document.documentElement 2、若网页中只有而没有上面的一行代码,则JS脚本应该使用document.body
6.具体代码如下:
前端关于移动端屏幕适配
来源: http://www.bubuko.com/infodetail-2026314.html