css3单位em，rem，px，vw，vh等

昨天发现了个好用的方法去设置手机端的rem单位，在这里记录下。

html{
　　font-size:calc(100vw/7.5);
}

这是按照750的设计稿（也就是iphone6的设计稿）。

100vw是设备的宽度，除以7.5可以让1rem的大小在iPhone6下等于50px。

替换页面中的单位，把所有的px单位替换成rem，除以100，比如某字体大小在设计稿上是36px，就是0.36rem。

在iPhone6下，所有元素的尺寸还是和视觉稿的尺寸一样，而iphone5/iphone6plus中，因为设备的宽度变小/变大了，100vw/7.5得到的值，会相应的变小、变大，即rem的单位值会变，页面中所有的尺寸会等比例缩放。

so,这样就做到l了针对不同分辨率的设备保持视觉一致了。

but，vw单位，在低版本的设备可能不支持，那就需要用js来处理一下：

document.documentElement.style.fontSize = window.innerWidth/3.75 + 'px'

ps：之所以让1rem等于50px，而不是1rem等于1px，是因为在chrome下针对中文的最小字体是12px。

px：绝对单位，页面按精确像素展示

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

ps：chrome的最小字体大小是12px，小于12则按照12来算，所以要注意一下哦

顺带给出让chrome字体小于12px的方法：

.font-small{
　 font-size: 12px;
   *font-size:9.6px;//为了兼容ie67
   -webkit-transform-origin-x: 0;
   -webkit-transform: scale(0.80);
}

利用css3的缩放属性，其最终大小就是：12px * 0.8 = 9.6px;

rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。

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

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

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

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

这几种单位（除了rem）的支持性：基本支持所有主流浏览器，ie必须是ie10+。

来源：https://www.cnblogs.com/olive27/p/6593126.html

标签