经常用的单位
固定单位:px,pt
相对单位:em rem %
浏览器默认字体大小16px;若是设置html/body字体大小为62.5%,那么实际字体大小为16*62.5%=10
以下所有单位都是在这个设置了62.5的前提下说的。
------------------------------------------------------------------------------------------------------
1.4什么情况下使用rem来布局和注意的问题
整体的布局还是使用百分比
使用rem的最佳场景是,遇到例如多列带有图片的列表,常常需要图片固定宽高比例
研究了一些网站,比如淘宝,对字体字体一般情况建议使用px
出现
1px
像素线的地方,仍旧使用border-width:1px;
而不是border-width:.1rem;
------------------------------------------------------------------------------------------------------
1.em
参考最近父元素
1em=10px;
2.%
有个相对性
①一般元素相对于父元素
②对于position:absolute;的元素是相对于已定位的父元素
③对于position:fixed;的元素相对于ViewPort
ViewPort:可视窗口,浏览器window的大小
特别:
3.rem
相对于根元素html
html {font-size: 62.5%; /10 ÷ 16 × 100% = 62.5%/}
body {font-size: 1.4rem; /1.4 × 10px = 14px /}
h1 { font-size: 2.4rem; /2.4 × 10px = 24px/}
IE9+ 和现代浏览器都已经支持了
手机端会出bug:
http://web.jobbole.com/89886/
4.vw vh
vw
Viewport宽度, ** 1vw ** 等于viewport宽度的1%vh
Viewport高度, ** 1vh ** 等于viewport高的的1%
vw和vh会随着viewport变化自动变化,再也不用js控制全屏神马的了
IE10+ 和现代浏览器都支持这两个单位
5.vmin vmax
针对vw vh
随着viewport变化
所有
浏览器都已经支持vmin ,
但是IE ** 全
部 ** 不支持vmax
6.ch ex
这两个单位根据当前font-family的相对单位
ch
字符0
的宽度ex
小写字符x
的高度
IE9+ 和现代浏览器都已经支持