网页美工设计

网页设计中的样式单位px、em、rem区别

编辑：时间：2017-06-22 08:42:21

　　「rem」是指根元素（rootelement）的字体大小，那么它的优点也就是不会随着父元素的字体大小变化而变化了，减少了父子元素之间字体大小计算的复杂程度。使用「rem」的目的就是让用户可以在浏览器设置中可以自定义字体的大小。

　　1、px精确的单位；

　　2、em为相对单位（相对父级元素）

　　3、rem为相对单位（相对根元素html）

　　em的计算是基于父级元素的，在实际使用中给我们的计算带来了很大的不便。所以rem的出现解救了我这样不会算术的人，再也不用担心父级元素的font-size了，因为它始终是基于根元素（html）的。比如默认的htmlfont-size=16px，那么我想设置12px的文字就是：12÷16=0.75（rem）。

　　国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？

　　PX特点

　　1.IE无法调整那些使用px作为单位的字体大小；

　　2.国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

　　3.Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

　　px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

　　PX为单位在Web页面初期制作中，我们都是使用“px”来设置我们的文本，因为他比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，他改变了浏览器的字体大小，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体。

　　em为单位前面也说了，使用是“px”为单位是比较方便，而又一致，但在浏览器中放大或缩放浏览页面时会存在一个问题，要解决这个问题，我们可以使用“em”单位。

　　这种技术需要一个参考点，一般都是以body的“font-size”为基准。比如说我们使用“1em”等于“10px”来改变默认值“1em=16px”，这样一来，我们设置字体大小相当于“14px”时，只需要将其值设置为“1.4em”。

<< 上一篇：网页设计中图片有哪些常见的使用技巧

>> 下一篇：怎么把网页设计的更有视觉效果

推荐资讯