css单位

相关网址：http://www.cnblogs.com/dolphinX/p/4097693.html

经常用的单位

  固定单位：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+ 和现代浏览器都已经支持