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

  px特点:

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

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

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

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

  em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(16px)。(引自CSS2.0手册)

  任意浏览器的默认字体高都是16px。所有未经调整的浏览器豆腐额:1em=16px。那么10px=0.625px。为了简化font-size的换算,需要在css的body选择器中声明font-size=62.5%,这就使em值变为16px*62.5%=10px,这样10px=1em,也就是说只需要将原来的px数值除以10,然后换上em作为单位就可以了。

  em特点:

  1.em的值并不是固定的

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

  所以我们在写CSS的时候如果body选择器中声明font-size=62.5%,然后将原来的px数值除以10,然后换上em作为单位;重新计算那些用em为单位的数值,避免字体大小重复声明。

  也就是避免1.2*1.2=1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em,因为此em非彼em,它因继承#content的字体高变为了1em=12px。

  rem特点:

  rem是CSS3新增的一个相对单位(root em 根em),这个单位引起了广泛的关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的有点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子:

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

  注意:

    选择使用什么字体单位主要由你的项目来决定,如果你的用户群都是用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。

 在这里为大家提供一个px,em,rem单位转换工具

 地址:http://pxtoem.com/

 

那么问题来了,根元素到底是什么呢?

彻底弄懂px,em和rem的区别的更多相关文章

  1. 彻底弄懂px em rem

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...

  2. css中px,em和rem的区别

    css中px,em和rem的区别 今天,突然间发现一个特别有意思的问题,就是无意间看到一个网站中的em并不是16px,下面展开了对于px和em以及rem的探究. 首先,px是绝对长度单位,是相对于显示 ...

  3. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

  4. css中单位em和rem的区别

    在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...

  5. 你真的知道em和rem的区别吗?

    前言 em 和 rem 都是相对单位,在使用时由浏览器转换为像素值,具体取决于您的设计中的字体大小设置. 如果你使用值 1em 或 1rem,它可以被浏览器解析成 从16px 到 160px 或其他任 ...

  6. 彻底弄懂css中单位px和em,rem的区别

    PX:PX实际上就是像素,用PX设置字体大小时,比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破.这样 ...

  7. 网页常见单位: px em pt % rem vw、vh、vmin、vmax , rem 使用

    1.网页常见单位:  px  em  pt    vw\vh   rem 1.1 px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言  (最终解析单位) em单位名称为相对长度 ...

  8. 比较css中单位px,em和rem的区别

    国内的设计师大都喜欢用px,而国外网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原 ...

  9. css中单位px、pt、em和rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS ...

随机推荐

  1. SpringBoot中部署Swagger2和Swagger-UI

    1 Gradle配置在dependencies中添加以下依赖: implementation("io.springfox:springfox-swagger2:2.7.0") im ...

  2. [Python3网络爬虫开发实战] 1.2.1-Requests的安装

    由于Requests属于第三方库,也就是Python默认不会自带这个库,所以需要我们手动安装.下面我们首先看一下它的安装过程. 1. 相关链接 GitHub:https://github.com/re ...

  3. centos 简单用户管理

    一.配置文件 /etc/passwd:存放用户信息,以“:”分割成7个部分 1.账号名称,用来对应UID: 2.早期密码存放位置,后来密码改存/etc/shadow中,以“x”代替: 3.UID,使用 ...

  4. Centos下PHP7.1打开Oracle扩展

    背景 最近因为项目研究了一下PHP集成Oracle,虽然这个组合很奇葩,但万一用到请勿采坑~ 环境 CentOS Linux release 7.3.1611 (Core) PHP7.1.1 安装or ...

  5. Oracle on Azure

    价格列表 https://azure.microsoft.com/en-us/marketplace/partners/msopentech/oracle-db-12c/ Oracle-Base 安装 ...

  6. 【莫比乌斯反演+树状数组+分块求和】GCD Array

    https://www.bnuoj.com/v3/contest_show.php?cid=9149#problem/I [题意] 给定长度为l的一个数组,初始值为0:规定了两种操作: [思路] 找到 ...

  7. 【BZOJ4591】超能粒子炮·改(Lucas定理,组合计数)

    题意: 曾经发明了脑洞治疗仪&超能粒子炮的发明家SHTSC又公开了他的新发明:超能粒子炮·改--一种可以发射威力更加 强大的粒子流的神秘装置.超能粒子炮·改相比超能粒子炮,在威力上有了本质的提 ...

  8. Thinkphp5.0 的实践一

    Thinkphp5.0 的实践一 tp5.0默认没有__SELF__,需要定义, define('__SELF__',strip_tags($_SERVER['REQUEST_URI'])); tp5 ...

  9. HDU.P1100 Trees Made to Order 解题报告

    http://www.cnblogs.com/keam37/p/3637717.html  keam所有 转载请注明出处 Problem Description We can number binar ...

  10. swift container server 莫名stuck

    openstack swift container server的进程经常莫名其妙进入 D Ds等状态 记录一下这个时候 storage.error的log 便于分析 一种情形是下面这种log Jun ...