18.9.14css中 px em rem % pt dp单位

1.px(pixel相对单位长度单位)，像素px是相对于显示器屏幕分辨率而言

2.em(emphasize)是相对单位长度,相对于当前对象内文本的字体尺寸,即em的计算是基于父级元素的字体大小的;如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸;通常1em=16px,为了简化font-size的换算,可以在css中的body选择器中声明font-size=62.5%,这就使1em值变成16px*62.5%=10px,这样12px=1.2em,10px=1em

3.rem(root em)是css3新增的一个相对单位,他是相对于html根元素的(在body标签里面设置字体大小不起作用),在移动端内、WebApp中使用居多,兼容ie8的话,再写一个绝对的单位hack下就成，如span{font-size：14；font-size：3rem}即可！

4.%,继承父元素单位

5.pt(point)点,绝对长度,1/72英寸,印刷行业常用单位,即在word或者wps办公软件中使用的字体大小单位 pt=1/72(英寸) px=1/dpi(英寸) pt和px的转化,默认的显示设置中把文字定义为96dpi，由公式px=pt*dpi/72，可得pt=px*3/4。

6.dp(density-independent pixel)是安卓开发用的长度单位,1dp表示在屏幕像素点密度为160ppi时1px长度

7.ppi(pixel per inch) 每英寸像素数,该值越高,屏幕越细腻,用于计算机和电视屏幕上每英寸显示的像素点的数量

8.dpi(dot per inch)每英寸多少点,该值越高,图片越细腻,用于打印

一个px em % pt转换工具:http://pxtoem.com/

em rem 案例:

<body style="font-size:14px">
    <p style="font-size:2em">我这里的字体显示大小是28px(14px*2)</p>  
    <div style="font-size:18px">
        <p style="font-size:2em">我这里显示字体大小是36px(18px*2),而不是上面计算的28px</p>
    </div>
</body>


<body style="font-size:14px">
     <p style="font-size:2rem">我这里的字体显示大小是32px(16px*2),因为我是根据html根元素的font-size大小进行计算的</p>  
     <div style="font-size:18px">
         <p style="font-size:2rem">我这里显示字体大小是32px(16px*2),因为我是根据html根元素的font-size大小进行计算的</p>
     </div>
 </body>


//默认font-size的大小是16px(若html标签中没有设置的话)

18.9.14css中 px em rem % pt dp单位

猜你喜欢