px em rem区别
之前面试有遇到过这个问题,不够当时没说出来,好丢脸的感觉,做了将近两年的前端开发,基本的单位都没搞清楚,虽然在上家公司统一使用的px,但是作为一个程序员,就该有探索精神不是【手动狗头】。
px
这个叫“像素”,这个单位在十年前可能很多人都不知道,不过现在科技这么发达,应该没有哪个年轻人不知道了。我就是个小前端,知识面有限,这个笔记我就记下关于css方面的东西,其他的就算了。
px只是一个相对单位,1px的长度在不同的显示器上可能显示的长度是不同的,绝大部分时候其实我还不需要关心1px的物理长度这种事,因为我们的项目没有这种变态需求。
感觉说了一堆废话,总之这就是一个基于屏幕分辨率的相对单位,在不同显示器上效果可能会不同。
em
emmm!~这个东西也是个相对单位,它是基于父级元素尺寸计算的,如果父元素的字体大小是16px,那么他的子元素字体的1em的大小就等于16px。
#html
<div class="div">
<p class="px">我叫杲新建</p>
<p class="em">我才是杲新建</p>
</div>
#css
.div{font-size: 16px;}
.em{font-size: 1em;}
效果是这样的
是不是一样大,这时候 1em = 16px;
em单位就是相对于父级元素设定,比如我们看下面这个示例
#html
<div class="div">
<p class="px">我叫杲新建</p>
<p class="em">
我才是杲新建
<br />
<span class="grandsun">这是孙子</span>
</p>
</div>
#css
.div{font-size: 16px;}
.em{font-size: 2em;}
.grandsun{font-size: 1em;}
效果就是这样
外层div字体大小是16px,子元素em的字体大小是.div的两倍,就是32px,而.grandsun的字体大小是其父元素.em的一倍,所以也是32px。
从这可以看出虽然一个是2em,一个是1em,但是两个元素的字体是一样大的。
rem
我们在在看最后一个rem。
这个跟em很像,是css3新增的,root em(相对于根的em),它也是相对大小,不过不是相对于父级元素,而是相对于根元素。我们来看下面的示例
#html
<body>
<div class="div">
<p class="px">我叫杲新建</p>
<p class="em">
我才是杲新建
<br/>
<span class="grandson">这是孙子</span>
</p>
</div>
</body>
#css
body{16px;}
.px{font-size: 1rem;}
.em{font-size: 2rem;}
.grandson{font-size: 1rem;}
效果是这样的
应该很清楚了吧,所有元素的字体大小都是相对于body来决定的,2rem的肯定是1rem的两倍咯。
到这里差不多就没有了,这三个单位本身其实也没有太多东西。
一般的,为了简化运算,在css中的body选择器中声明Font-size=62.5%,这样1em的大小就是10px,1.4em的大小就是14px。
如果有什么不对的地方,欢迎大神指出。