在平常做网站写代码的时候一般都是使用px,在之前的学习时就略微的学习了一些关于em、rem的知识,但是由于一直没有用到过,所以几乎全部忘记了。今天在研究一些知识的时候用到了em,所以特意将学到的知识总结一下。

1.em

em是相对长度单位,相对于当先对象中的字体尺寸。比如在某个div中font-size设置为20px,那么,1em就相当于20px,0.25em就相当于5px。由于浏览器的默认字体大小为16px,所以为了简化font-size的换算,就要在body的选择器中将font-size设置为62.5%,换算成像素,就是16*62.5%=10px,这样在之后的设置尺寸大小的时候就可以用1.2em代表12px,也就是说此时的换算关系就是1em=10px。

值得注意的是em会集成父级元素的字体大小。所以不要轻易的在当前元素中改变em。

2.rem

rem和em有相似的使用方法,都是相对长度单位。不同的是rem需要在根元素html的css选择器中设置font-size,设置font-size为14px,则1rem就是14px。使用这个长度单位的好处是可以用于做适配。可以直接在<hmtl>中更改font-size就可以在不同的移动端显示不同大小的元素。我们都知道浏览器默认的字体大小都是16px,因此在一些书中会这样写到:将html的font-size设置成62.5%,这样就是10px,那么接下来的0.1rem就是1px了,这样好算。但是,在实际中我发现在谷歌浏览器中这个方法是不可行的。

  因为在谷歌浏览器中的默认字体大小虽然是16px,但是在html中却不可以将字体设置小于12px,如果小于12px就会默认以12px来计算。这样的话我们的62.5%为10px就破灭了。所以在我看来可能最好的方法就是设置成为20px了,也就是在html中设置字体为125%或是直接20px。

资料来源:http://www.cnblogs.com/leejersey/p/3662612.html

理解em,rem以及rem的失效问题的更多相关文章

  1. css单位介绍em ex ch rem vw vh vm cm mm in pt pc px

    长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %,大概可以分为几种"绝对单位"和"相对单位"和" ...

  2. 如何感性地理解EM算法?

    https://www.jianshu.com/p/1121509ac1dc 如果使用基于最大似然估计的模型,模型中存在隐变量,就要用EM算法做参数估计.个人认为,理解EM算法背后的idea,远比看懂 ...

  3. 从理解开始 谈谈px rem 和 em 的区别与联系

    概述 古语有云,没有规矩则不成方圆.秦灭六国之后为了促进国内生产力的发展,也是大力推进全国度量衡的统一.车同轨,书同文.与"尺寸"相关的问题(手动滑稽),从古至今一直为人们所关注. ...

  4. em换算px,rem换算px

    <body> <style type="text/css" rel="stylesheet"> html,body{ font-size ...

  5. em和rem及rem在移动的应用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style t ...

  6. CSS各种度量单位----px、em、%、rem、vh/vw、vmin/vmax

    本文主要讲下CSS中各类度量单位的意思和区别. 开发中最常用到的css单位是px.em.%.随着css3的出现,带来了更多的度量单位,这些单位为响应式开发,带来很大的好处.各种单位的浏览器兼容性可以去 ...

  7. 你不知道的css各类布局(五)之em布局、rem布局

    em布局/rem布局 em和rem的区别 在了解弹性布局前我们需要先知道em和rem rem:font size of the root element,rem是相对于根元素<html>来 ...

  8. 响应式布局rem、rem方法封装、移动端响应式布局

    相信大家在做移动端的时候都会做各个手机的适配这种适配就是响应式布局在之前做网站的响应式从pc到手机用的是媒体查询 @media screen and (max-width: 300px){} 最大宽度 ...

  9. 深入理解Redis中的主键失效及其实现机制

    参考:http://blog.sina.com.cn/s/articlelist_1221155353_0_1.html 作为一种定期清理无效数据的重要机制,主键失效存在于大多数缓存系统中,Reids ...

随机推荐

  1. angularjs的touch事件

    angularJs没有touch事件.这里提供一个touch指令. ngTouch.js "use strict"; angular.module("ngTouch&qu ...

  2. 4. read命令

    4.1 作用 从标准输入中读取一行. 4.2 参数 -p 允许在read命令行中直接指定一个提示. -t 给用户的输入作限时规定. -n 规定read后变量所接收的字符的个数. -s 使得read命令 ...

  3. Codeforces 723d [暴力dfs]

    /* 不要低头,不要放弃,不要气馁,不要慌张. 题意: 给n,m和k,n和m为所给矩阵的高和宽.k是要求最多剩下的湖的数量. 在所给的矩阵中,*代表陆地,.代表水. 湖的定义是一片连续的水(上下左右四 ...

  4. springmvc常用注解与类型转换

    springmvc常用注解与类型转换 一:前置 spring -servlet.xml 注入 <!-- 启用spring mvc 注解 --> <context:annotation ...

  5. javascript笔记:流程控制语句

    一.条件语句 1.if语句 if 语句即条件判断语句,一共有三种格式: (1)if (条件表达式) 语句: var box = 100; if (box >50) { alert('box大于5 ...

  6. PHP中使用Session配合Javascript实现文件上传进度条功能

    Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...

  7. 为什么C++中空类和空结构体大小为1?(转载)

    原文链接:http://www.spongeliu.com/260.html 对于结构体和空类大小是1这个问题,首先这是一个C++问题,在C语言下空结构体大小为0(当然这是编译器相关的).这里的空类和 ...

  8. Ms sql 2000互转2005

    BCP导入导出数据.非常的方便.速度很快.--还原部分,指定强制还原(使用WITH MOVE指定文件还原,RELPACE由于版本不一样,所以要指定REPLACE,如果不指定REPLACE参数,会提示版 ...

  9. C语言面试题汇总之一

    C语言面试题汇总之一 1.static有什么用途?(请至少说明两种) l 限制变量的作用域: 设置变量的存储域. 2.引用和指针有什么区别? 引用必须被初始化,指针不必: 引用初始化以后不能被改变,指 ...

  10. {CSDN}{英雄会}{火车调度}

    思路: 给定一系列时刻表,求能满足各个时刻的最小火车数量. 打眼一看, 把此题归入到最大流,仔细一想不符合流网络的规律,换思路. 由于是一个最优化问题,自然想到动态规划和贪心. 最后确定贪心.从最早出 ...