CSS UNIT 详解以及最佳实践

Posted littlegirl

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS UNIT 详解以及最佳实践相关的知识,希望对你有一定的参考价值。

分类 

■    绝对长度(Absolute units):cm,mm,in,pt,pc

    • 绝对单位之间的换算:1in = 2.54cm=25.4mm=72pt=6pc
    • 绝对长度在css中的表现和其他地方都一样, 1cm就是1cm

■     相对长度(Relative units):em,px,%,rem,vm,vh,vmin,vmax

    • px是基于设备的,不同设备不同的展现,但是打印输出设备上始终表现一致,1PX = 1/96 * inch。
    • em 是基于元素最近的font-size的设定

一个元素字体为10px,1.5em=15px

html {

  font-size: 10px;

  border-width: 1em; /* 10px */

}

body {

  font-size: 2em; /* 20px */

  border-width: 1em; /* 20px, not 10px, because it follows its own font-size */

}

    • ex是基于字体的,小写字母的高度,使用率极小。
    • 视口相对长度(Viewport units):vm,vh,vmin,vmax

vm,vh是根据用户的窗口大小变化,

1vh=1%* windowHeight;

1vw=1% * windowWidth

vmin:vm和vh中更小的那个,vmax:vm和vh中更大的那个x

 

 

怎么用

一般来说印刷在纸上和显示在屏幕上使用的是不同的单位集,下边是一些推荐用法:

 

推荐

偶尔会用

不建议使用

Screen

 em,px,%

ex

pt,cm,mm,in,pc

Print

Em,cm,mm,in,pt,pc,%

px,ex

 

 

 

 

 

 

高分辨时,绝对单位在css中的表现和其他地方都一样,在激光打印机上,1cm就是1cm,但是在低分辨率时,显示就不尽如人意了,绝对单位最好用在高分辨率的输出媒体,如打印机。

只在打印的时候推荐绝对单位的原因还有一个,我们从不同的距离看不同的屏幕感官不同,比如1cm你在电脑显示屏上你看着ok,但是手机拿的近看着不好了,所以使用相对距离就更好。

最佳实践

■        Document-level:  %

html {

  font-size: 100%;

}

100%的话其实用的就是浏览器,手机设备等的默认字体大小,这个大小是他们通过千锤百炼推敲出来的,你还瞎捉摸啥

■        Border: px

大多数情况下,边框是不需要缩放的

■        Font-size:em

每个控件的上下文不同, em可以很灵活的控制每个控件内部的排版

■        Padding and margin: rem

很容易统一所有页面的空白区域,每个控件的上下文不同,所以用rem比em更合适

■        Media queries: em,rem

以上是关于CSS UNIT 详解以及最佳实践的主要内容,如果未能解决你的问题,请参考以下文章

用于 jQuery 选择器的 CSS 类命名的最佳实践

scala - 最佳实践(03):Method名称

CSS3 - 性能最佳实践是啥? [关闭]

规范化 CSS 的最佳实践是啥? [关闭]

css css最佳实践

转 Web程序优化的最佳实践:JavaScript和CSS篇