任意浏览器的默认字体高都是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作为单位就行了。

EM特点

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

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

所以我们在写CSS的时候,需要注意两点:

  1. body选择器中声明Font-size=62.5%;

  2. 将你的原来的px数值除以10,然后换上em作为单位;

  3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

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

rem特点

   它始终是基于根元素(html) 的,需要注意的是,为了兼容不支持 rem 的浏览器,我们需要在 rem 前面写上对应的 px 值。
默认还是16px,除非你自己用font-size定义为其他,没有了继承父级尺寸这个关系。

rem,em的更多相关文章

  1. 自适应布局,响应式布局以及rem,em区别

    一.自适应和响应式 先说共同点: 两者都是因为越来越多的 移动设备( mobile, tablet device )加入到互联网中来而出现的为移动设备提供更好的体验的技术.用技术来使网页适应从小到大( ...

  2. mobile css & rem & em & px

    mobile css & rem & em & px 1 rem === 16px 任意浏览器的默认字体高都是 16px, 所有未经调整的浏览器都符合: 1em=16px, 那 ...

  3. webview的弹性布局之rem,em

    webview页面的自适应一般有两种方法,即一是JS的计算方法,二是通过css的media设置分档方式.在此主要介绍css的方式. html { font-size: 16px; } @media o ...

  4. rem,em,与px的比较用法

    在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px v ...

  5. rem & em初探

    Rem为单位 CSS3的出现,他同时引进了一些新的单位,包括我们今天所说的rem.在W3C官网上是这样描述rem的——“font size of the root element” .下面我们就一起来 ...

  6. px,rem,em的区别

    PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

  7. 移动端布局rem em

    1.概念 em作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小 rem作用于非根元素时,相对于根元素字体大小:rem作用于根元素字体大小时,相对于其出初 ...

  8. 字体的设置 REM EM PX

    px 1 一般设置页面的字体使用px 2 优点:字体设置比较稳定和精确 3 缺点:他会修改用户浏览器中的字体大小 EM 相对于父元素的字体大小,字体大小不确定,容易混乱,“em”是相对于其父元素来设置 ...

  9. 日常博客----rem,em的恩怨相杀

    基本知识: 使用 em 和 rem 单位可以让我们的设计更加灵活,能够控制元素整体放大缩小,而不是固定大小. 我们可以使用这种灵活性,使我们在开发期间,能更加快速灵活的调整,允许浏览器用户调整浏览器大 ...

随机推荐

  1. BZOJ1070[SCOI2007]修车——最小费用最大流

    题目描述 同一时刻有N位车主带着他们的爱车来到了汽车维修中心.维修中心共有M位技术人员,不同的技术人员对不同的车进行维修所用的时间是不同的.现在需要安排这M位技术人员所维修的车及顺序,使得顾客平均等待 ...

  2. BZOJ5372 PKUSC2018神仙的游戏(NTT)

    首先有一个想法,翻转串后直接卷积看有没有0匹配上1.但这是必要而不充分的因为在原串和翻转串中?不能同时取两个值. 先有一些结论: 如果s中长度为len的前缀是border,那么其存在|s|-len的循 ...

  3. 斜率DP个人理解

    斜率DP 斜率DP的一版模式:给你一个序列,至多或分成m段,每段有花费和限制,问符合情况的最小花费是多少: 一版都用到sum[],所以符合单调,然后就可以用斜率优化了,很模板的东西: 如果看不懂可以先 ...

  4. UVALive5870-Smooth Visualization-模拟水题

    很水的模拟题,拿数组搞就好了. 注意边界的地方不要算重. #include <cstdio> #include <cstring> #include <algorithm ...

  5. Mysql插入、替换和无视

    在现实的生产环境下,通常我们都会遇到这样的应用场景,需要我们更新数据.替换数据,若存在则不操作. insert into表示插入数据,数据库会检查主键,如果出现重复会报错: replace into表 ...

  6. SDL源码阅读笔记(1) 基本模块

    write by 九天雁翎(JTianLing) -- blog.csdn.net/vagrxie 前言 对于大牛来说,写关于阅读源码的文章都会叫源码剖析或者深入浅出啥的,对于我,自己阅读阅读源码,写 ...

  7. 笔记: c开发gui程序 (WM_CREATE, WS_CLIPCHILDREN , SetWindowPos)

    过去两年,用c写的gui程序我一般使用的套路是: 在 winMain()中, 先创建一个主窗口, 紧接着就是在下面创建子窗口(子控件). 可能是因为写这方面的程序较少,所以也没遇到什么大问题,之前就是 ...

  8. ASP: Response 对象 错误 'ASP 0251 : 80004005' 解决办法

    Response 对象 错误 'ASP 0251 : 80004005' 超过响应缓冲区限制 这种情况一般是因为需要输出的网页内容太大了,由于asp在输入内容到客户的浏览器上之前,会把需要输出的全部内 ...

  9. Eclipse导入模板格式Xml配置文件

    Eclipse一般常用的可以导入两处 *.xml 格式的模板,一个是常用的注释格式模板,另一个是代码格式化时用的模板,导入方法如下: 假设: 1.xml 是代码注释格式模板     2.xml 是代码 ...

  10. JasperReport 中踩过的坑

      Mac Book Pro 10.13.6Jaspersoft Studio community version 6.6.9JDK 8 安装 Jaspersoft Studio Jasper Rep ...