px em rem 区别
PX:
PX实际上就是像素,用PX设置字体大小时,比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说,就是一个大问题了。
因此,这时就提出了使用“em”来定义Web页面的字体。 EM:
EM就是根据基准来缩放字体的大小。EM实质是一个相对值,而非具体的数值。这种技术需要一个参考点,一般都是以<body>的“font-size”为基准。如WordPress官方主题Twenntytwelve的基准就是14px=1em。
另外,em是相对于父元素的属性而计算的,如果想计算px和em之间的换算,这个网站不错,输入数据就可以px和em相互计算。狠击这里:px和em换算
EM特点
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
所以我们在写CSS的时候,需要注意两点:
1. body选择器中声明Font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
Rem:
EM是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小。而Rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值。 浏览器的兼容性
除了IE6-IE8r,其它的浏览器都支持em和rem属性,px是所有浏览器都支持。
因此为了浏览器的兼容性,可“px”和“rem”一起使用,用"px"来实现IE6-8下的效果,然后使用“Rem”来实现代浏览器的效果。 选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。
在这里为大家提供一个px,em,rem单位转换工具
参考:http://www.w3cplus.com/css3/define-font-size-with-css3-rem
px em rem 区别的更多相关文章
- px em rem区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
- css单位px,em,rem区别
在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...
- px,em,rem的区别
PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...
- css中px,em,rem,rpx的区别
今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...
- css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...
- px,em,rem字体单位
1.px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) 2.em是相对长度单位.相对于当前对象内文本的字体尺寸,em存在值继承问题. 浏览器的默认字 ...
- 彻底弄懂px em rem
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
- css里px em rem特点(转)
1.px特点: 1.IE无法调整px作为单位的字体大小: 2.Firefox能够调整px.em和rem. px是像素,是相对长度单位,是相对于显示器屏幕分辨率而言的. 2.em特点: 1.em的值并不 ...
- px/em/pt区别和转换
老是被人问到px.pt和em的区别,自己有时候也会纠结到底该用什么单位,今天特意查了一些文章,下面这篇虽然很久远了,但解释的比较全面,转载收藏之.点击查看原文 这里引用的是Jorux的“95%的中国网 ...
随机推荐
- linux内核中的DMI是什么?
答: 桌面管理接口(Desktop Management Interface).是用来获取硬件信息的,在内核中有一个配置项CONFIG_DMI用来添加此功能到内核中!
- 為什麼gnome-terminal中不能使用ctrl_shift_f來進行查找? 是因為 跟输入法的全局设置衝突了!
但是,也要注意, 为什么ctrl+shift_f有时候可以使用, 有时候又不可以使用? 是因为, 这个跟输入法的状态有关, 如果输入法是英文, 那么中文的 "简体/繁体切换快捷键ctrl+s ...
- 大数乘法|2012年蓝桥杯B组题解析第六题-fishers
(9')大数乘法 对于32位字长的机器,大约超过20亿,用int类型就无法表示了,我们可以选择int64类型,但无论怎样扩展,固定的整数类型总是有表达的极限!如果对超级大整数进行精确运算呢?一个简单的 ...
- (转)ElasticSearch学习
(二期)21.全文搜索引擎Elasticsearch [课程21]elasticsearch.xmind82.1KB [课程21]lucene.xmind0.8MB [课程21]基本用法....api ...
- (转载)Unity3D连接本地或局域网MySQL数据库
准备工作: 1.打开 Unity3D 安装目录,到这个路径下 Editor > Data > Mono > lib > mono > 2.0 拷贝出下图的五个动态链接库, ...
- CentOS7使用httpd apache 和firewalld打开关闭防火墙与端口
Centos7 使用systemctl 工具操作命令 systemctl 是Centos7的服务管理工具中的主要工具 ,它融合之前service和chkconfig的功能于一体 一.httpd的设置 ...
- oogle advertiser api开发概述——速率限制
速率限制 为了向遍布全球的 AdWords API 用户提供可靠的服务,我们使用令牌桶算法来衡量请求数并确定每秒查询数 (QPS) 速率.这样做的目的是阻止恶意的或不可控的软件大量入侵 AdWords ...
- Docker Engine SDKs and API 的开发2
Examples using the Docker Engine SDKs and Docker API After you install Docker, you can install the G ...
- 20165306 实验一Java开发环境的熟悉
Java开发环境的熟悉 实验报告封面 实验内容与步骤 Java开发环境的熟悉-1 1.建立"自己学号exp1"的目录 2.在"自己学号exp1"目录下建立src ...
- Git 分支 - 远程分支
Git 分支 - 远程分支 远程分支 远程分支(remote branch)是对远程仓库中的分支的索引.它们是一些无法移动的本地分支:只有在 Git 进行网络交互时才会更新.远程分支就像是书签,提醒着 ...