理解em,rem以及rem的失效问题
在平常做网站写代码的时候一般都是使用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的失效问题的更多相关文章
- 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 %,大概可以分为几种"绝对单位"和"相对单位"和" ...
- 如何感性地理解EM算法?
https://www.jianshu.com/p/1121509ac1dc 如果使用基于最大似然估计的模型,模型中存在隐变量,就要用EM算法做参数估计.个人认为,理解EM算法背后的idea,远比看懂 ...
- 从理解开始 谈谈px rem 和 em 的区别与联系
概述 古语有云,没有规矩则不成方圆.秦灭六国之后为了促进国内生产力的发展,也是大力推进全国度量衡的统一.车同轨,书同文.与"尺寸"相关的问题(手动滑稽),从古至今一直为人们所关注. ...
- em换算px,rem换算px
<body> <style type="text/css" rel="stylesheet"> html,body{ font-size ...
- em和rem及rem在移动的应用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style t ...
- CSS各种度量单位----px、em、%、rem、vh/vw、vmin/vmax
本文主要讲下CSS中各类度量单位的意思和区别. 开发中最常用到的css单位是px.em.%.随着css3的出现,带来了更多的度量单位,这些单位为响应式开发,带来很大的好处.各种单位的浏览器兼容性可以去 ...
- 你不知道的css各类布局(五)之em布局、rem布局
em布局/rem布局 em和rem的区别 在了解弹性布局前我们需要先知道em和rem rem:font size of the root element,rem是相对于根元素<html>来 ...
- 响应式布局rem、rem方法封装、移动端响应式布局
相信大家在做移动端的时候都会做各个手机的适配这种适配就是响应式布局在之前做网站的响应式从pc到手机用的是媒体查询 @media screen and (max-width: 300px){} 最大宽度 ...
- 深入理解Redis中的主键失效及其实现机制
参考:http://blog.sina.com.cn/s/articlelist_1221155353_0_1.html 作为一种定期清理无效数据的重要机制,主键失效存在于大多数缓存系统中,Reids ...
随机推荐
- (转)DataGridView多维表头及其扩展功能
dataGridView1.RowHeadersVisible = false;把整行选中那一列去掉.如果需要整行选中,新增一按钮列模拟实现.上源码:多维DataGridView 有个简易的方法: 1 ...
- WANem2.3
http://downloads.sourceforge.net/wanem http://openmaniak.com/wanem_network.php 只能以iso方式运行,安装到硬盘后无法保存 ...
- XE6移动开发环境搭建之IOS篇(4):VMware9里安装Mac OSX 10.8(有图有真相)
网上能找到的关于Delphi XE系列的移动开发环境的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 以下内容比较长,我们 ...
- SimpleDateFormat做成员或者静态成员多线程安全隐患
转自:http://blog.csdn.net/jeamking/article/details/7183958 有时我们在同一个类中都是使用同一种日期格式,又或者为了减少new SimpleDate ...
- EXT学习之——Ext两个js之间的传参
A 的js访问 B的js,并将A选择的guid的行传到 B的 js进行处理事项 A 的js 的写法var receiverFrom = new xxx.xxx子js方法体名 ({ parentCm ...
- django若干问题
1.使用post方式 在views.py里要出发post请求的函数前加入@csrf_exempt ,之前要引入from django.views.decorators.csrf import csrf ...
- eclipse配置javacv0.8
之前配置了一次javacv,但是忘了做笔记,这次又重新查了一遍资料,很多东西模棱两可,浪费了很多时间,这次配置成功,总结如下,希望能帮到大家. 如不明确,可以联系我. javacv下载 https ...
- Entity Framwork(EF) 7——在现在数据库的甚而上开发MVC 新项目
一.开发背景: 由于老系统已经无法满足实际业务需求,需在现有数据库的甚而上开发新的项目. 二.困难点: 而EF默认情况下是要删除现有数据库表格后重新创建,这是不允许的.当你创建数据库对象时系统会提示“ ...
- git 放弃本地修改 强制更新
git reset --hard origin/master
- NHibernate系列文章十五:NHibernate组件
摘要 前面文章介绍了NHibernate对简单.net数据类型的映射对照表.NHibernate也可以映射复杂数据类型,这里介绍通过组件映射NHibernate值对象. 1. NHibernate引用 ...