px em rem的详解与区别

在前端项目开发中,px,em,以及rem都是页面布局常用的单位,虽然它们是长度单位,但是所含的意义不一样。通过复习和查阅,总结了以下知识。

px像素(Pixel)

    定义:相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

    特点:

      1:px代表的是像素,用它设置字体大小时,比较稳定和准确。

         2:px的数值是写死的,Ie中没办法改变这些字体的大小。

     运用:

<style>
 p{font-size:18px}
</style>

em

    定义:是相对长度单位。相对于当前对象内文本的字体尺寸(通常是针对于其父元素的尺寸)。(引自CSS2.0手册)

    特点:

      1:em的值并不是固定的;

       2. em会继承父级元素的字体大小。

    运用:

      任意浏览器的默认字体高都是16px,因此所有未经调整的浏览器都符合: 1em=16px。

     为了简化操作,在css的body标签中声明font-size为62.5%,这样在写原来的px的数值除以10,然后换上em就可以了,原因:16px*62.5%=10px,例如:12px=1.2em,

<style>
body{font-size: 62.5%}
p{font-size: 1.2em}
</style>

rem (font size of the root element)

定义:是CSS3新增的相对单位,它只是相对于html标签来设定的。

特点: 只针对与html的大小而变化,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

     缺点: 兼容性问题,IE6-8不支持该单位,解决办法:就是在标签中添加绝对单位如em,px。这样IE6-8会自动忽略rem选择em或px。

     运用:在css中html标签添加font-size的值,一般是62.5%,为了方便计算。在所有的子标签中就可以针对于html的大小进行改变。如:

<style>
html {font-size: 62.5%;}
body {font-size: 1.8rem;}
h1 { font-size: 2.2rem;}
</style>

在新版本的浏览器都支持rem这个单位, 只有IE才有兼容性问题,选择使用什么字体单位主要由你的项目开发来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。

    

时间: 2024-11-10 14:12:50

px em rem的详解与区别的相关文章

px,em,rem,vh,vw,vmin,vmax的区别

css手册中关于font-size是这么介绍的: font-size 值可以是绝对或相对值. 绝对值: 将文本设置为指定的大小 不允许用户在所有浏览器中改变文本大小(不利于可用性) 绝对大小在确定了输出的物理尺寸时很有用 相对大小: 相对于周围的元素来设置大小 允许用户在浏览器改变文本大小 注意:如果您没有规定字体大小,普通文本(比如段落)的默认大小是 16 像素 (16px=1em). 1.px:为像素单位.它是显示屏上显示的每一个小点,为显示的最小单位.它是一个绝对尺寸单位: 2.em:相对

CSS3中REM使用详解

在页面中设置字体,我们知道有常见的两种,px 和 em. px 在Web页面制作中,我们一般使用"px"来设置我们的文本,因为他比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小(虽然一般人不会去改变浏览器字体大小),这时会使用我们的Web页面布局被打破,这时就提出了使用"em"来定义Web页面的字体. em 一般都是body的font-size为基准常用写法: 01 02 03 04 05 06 07 0

彻底弄懂px em rem

国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核). px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) em是相对长度单位.相对于当前对象内文本的字体尺寸.

px,em,rem字体单位

1.px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) 2.em是相对长度单位.相对于当前对象内文本的字体尺寸,em存在值继承问题. 浏览器的默认字体高都是16px,默认识别最小字体12px.所有未经调整的浏览器都符合: 1em=16px.那么12px=0.75em,10px=0.625em.为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px,

String-StringBuffer-StringBuilder详解和区别

String-StringBuffer-StringBuilder详解和区别 简要的说, String 类型和 StringBuffer类型的主要性能区别其实在于 String 是不可变的对象, 因此在每次对 String 类型进行改变的时候其实都等同于生成了一个新的 String 对象,然后将指针指向新的 String 对象,所以经常改变内容的字符串最好不要用 String ,因为每次生成对象都会对系统性能产生影响,特别当内存中无引用对象多了以后, JVM 的 GC 就会开始工作,那速度是一定

ViewPager 的适配器 PagerAdapter 、FragmentPagerAdapter与FragmentStatePagerAdapter使用详解与区别

1.FragmentPagerAdapter与FragmentStatePagerAdapter使用详解与区别

List、Set、Map详解及区别

一.List接口 List是一个继承于Collection的接口,即List是集合中的一种.List是有序的队列,List中的每一个元素都有一个索引:第一个元素的索引值是0,往后的元素的索引值依次+1.和Set不同,List中允许有重复的元素.实现List接口的集合主要有:ArrayList.LinkedList.Vector.Stack. ArrayList ArrayList是一个动态数组,也是我们最常用的集合.它允许任何符合规则的元素插入甚至包括null.每一个ArrayList都有一个初

px em rem 的区别

px:像素,用px设置字体大小,比较精确.但是不能适应浏览器的缩放. em:是一个相对值,根据基准来缩放字体大小.默认1em等于16px,可在body中设置:font-size:62.5%;此时,1em等于10px.em的大小是根据父元素来计算的. rem:相对值,根据基准来缩放字体大小,rem大小根据 根元素html来计算. 注:ie6-8不兼容em,rem,此种情况,可以px和rem一起使用.eg:p{font-size:14px;font-size:0.875rem;}

css里px em rem特点(转)

1.px特点: 1.IE无法调整px作为单位的字体大小: 2.Firefox能够调整px.em和rem. px是像素,是相对长度单位,是相对于显示器屏幕分辨率而言的. 2.em特点: 1.em的值并不是固定的: 2.em会继承父级元素的字体大小. em也是相对长度单位,相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸. 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合:1em=16px.那么12px=0.75em,10px=0.6