px、em、rem、%单位

px:

像素(pixel)相对长度单位,像素是相对于显示器屏幕分辨率而言的

em:

相对长度单位,相对于当前对象内文本的字体尺寸。若当前对行内文本的字体尺寸未被认为设置,则相对于浏览器的默认字体尺寸

1、em的值并不是固定的

2、em会继承父元素的字体大小

p{font-size:2em;}
a{font-size:2em;}

<p><a>我们都是好孩子</a></p>

等同于:
a{font-size:4em;}

<p><a>我们都是好孩子</a></p>

 

div{font-size:2em;}
p{font-size:2em;}
a{font-size:2em;}

<div>
    <p>
        <a>我们都是好孩子</a>
    </p>
</div>    

等同于:a{font-size:8em;}(2*2*2=8)

 

rem:

css3新增的一个相对单位(root em,根em)

rem为元素设定字体大小时,仍然是相对大小,但相对的是HTML根元素<html>

优点:通过它既可以成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应

目前,除了ie8以及更早版本外了,所有浏览器均支持rem,若不支持,就多写一个绝对单位的声明,那么这些浏览器就会忽略用rem设定的字体大小了

p{
    font-size:14px;
    font-size:0.875rem;
}

 

pt:

印刷业上常用的单位,磅的意思,一般用于页面打印排版

 

换算:

px to em:12px/16px=0.75em;

px to %:12px/16px*100=75%;

px to pt:16px*(72pt/96px)=12pt;

em to px:0.75em*16px=12px;

 

换算工具

http://pxtoem.com/

 

posted @ 2015-06-15 14:57  北极星光  阅读(365)  评论(0编辑  收藏  举报