em,rem和vh

时间 2019-12-04

标签 rem 栏目 CSS 繁體版

原文原文链接

最近研究自适应。总结一下CSS3的几个单位。css

概述

remhtml

root emphasize，根元素<html>的font-sizeandroid

vw，vhcss3

vw:屏幕宽度相关，1vw是屏幕宽度的1%
vh:屏幕高度相关，1vh是屏幕高度的1%
vmin，vmax 分别表示二者中较小和较大的部分。web

emsegmentfault

基准点为父节点的font-size
若是自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册) 意浏览器的默认字体高都是16px。全部未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。
为了简化font-size的换算，须要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只须要将你的原来的px数值除以10，而后换上em做为单位就好了。浏览器

三者兼容性
vh,vw:ie9及其以上、safari5及其以上、android4.4及其以上等。app

rem是css3属性，IE9及以上全部浏览器，安卓2.1以上版本，iOS4.0以及以上版本的safari（换句话说，IE6-8不兼容）
em是css2属性字体

结论

比较得出，em的缺陷较多，不宜使用。
而rem的兼容性比vh/vw稍好一些。htm

下面给出一个rem使用的教程，综合js和rem作web app的自适应，很是好用。
http://www.javashuo.com/article/p-rtaxqepy-z.html