看了些关于rem的知识点,在这做个自我总结归纳
我们最常用的字体单位是PX和EM。
首先px:
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)
px会随着屏幕分辨率的改变而改变,但是浏览器对页面进行缩放时会对页面的整体布局产生影响。
em:
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
em一般会以<body>的font-size为基准,他继承于父级元素。如果多层嵌套比较容易引起混乱。例如:
<body>
<div>
<p></p>
</div>
</body>
如果body中设置字体为10px,div中字体为1.2em即12px。那么如果要设置p中字体为12px,则应在p中设置1em而非1.2em。若在p中设置1.2em,则字体实际大小为1.2*1.2=1.44。
而css3出现了一个新的单位rem
使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素,而非em相对的父级元素。
也就是说你可以在html节点定义一个单独的字体大小,然后所有其他元素使用rem相对于这个字体的百分比进行设置,这样就意味着,我们只需要在根元素确定一个参考值,在根元
素中设置多大的字体,这完全可以根据您自己的需要。
比如:
html{font-size:62.5%}/*根元素中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算,如果没有设置,将是以“16px”为基准 )。
body{font-size:1.2rem}/*12px*/
h1{font-size:1.4rem}/*14px*/
具体换算参考http://pxtoem.com/
看了些关于rem的知识点,在这做个自我总结归纳的更多相关文章
- IOS学习笔记48--一些常见的IOS知识点+面试题
IOS学习笔记48--一些常见的IOS知识点+面试题 1.堆和栈什么区别? 答:管理方式:对于栈来讲,是由编译器自动管理,无需我们手工控制:对于堆来说,释放工作由程序员控制,容易产生memor ...
- javascript 容易忽略的小知识点 new到底做了什么?
问题:平时我们经常写 var ss = new Person():ss就是一个由'Person类'生成的对象了,可是我们的Person方法里却没有写 return: (var ss= Person() ...
- LeetCode 87,远看是字符串其实是搜索,你能做出来吗?
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是LeetCode专题第54篇文章,我们一起来看LeetCode 87题,Scramble String(爬行字符串). 这题的官方难度 ...
- 一文看懂:ChIP实验和qPCR定量分析怎么做|易基因技术
大家好,这里是专注表观组学十余年,领跑多组学科研服务的易基因. 染色质免疫共沉淀(Chromatin Immunoprecipitation,ChIP),是研究体内蛋白质与DNA相互作用的经典方法. ...
- Android 的 so 文件加载机制
本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布 最近碰到一些 so 文件问题,顺便将相关知识点梳理一下. 提问 本文的结论是跟着 System.loadlibrary() 一层层源 ...
- 插件化框架解读之so 文件加载机制(四)
阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680 提问 本文的结论是跟着 System.loadlibrary() ...
- MemSQL分布式架构介绍(一)
最近在了解MemSQL架构,看了些官方文档,在这里做个记录,原文在这里:http://docs.memsql.com/latest/concepts/distributed_architecture/ ...
- JAVA开发:分享一些SpringMvc+Ibatis+spring的框架使用心得
近期不在做.net的项目,而是使用java作为开发语言,就想着要用springmvc开发了,由于前些年也用过struts1/2+hibernate/ibatis+spring开发过项目,因此是有些底子 ...
- DB2开发系列之一——基本语法
最近看了些db2开发方面的资料,现做摘要,以供自己和大家参考: 1.变量声明 DECLARE v_salary DEC(9,2) DEFAULT 0.0; DECLARE v_status char( ...
随机推荐
- AttributeBehavior
当事件触发的时候... 会循环所有behavior的events 为ower添加事件.....AttributeBehavior 为事件添加如下方法 public function evaluat ...
- 日志分析(二) logstash patterns
grok-patterns内置了很多基础变量的正则表达式的log解析规则,其中包括apache的log解析(同样可以用于nginx的log解析). 基于nginx日志分析配置: 1.配置nginx ...
- No identifier specified for entity
主键问题 使用hibernate的e-r映射pojo类的时候遇到org.hibernate.AnnotationException: No identifier specified for ent ...
- Android进阶笔记14:ListView篇之ListView性能优化
1. 首先思考一个问题ListView如何才能提高效率 ? 当convertView为空时候,用setTag()方法为每个View绑定一个存放控件的ViewHolder对象.当convertView不 ...
- sql server 2008 com.microsoft.sqlserver.jdbc.SQLServerException: 通过端口 1433 连接到主机
右击我的电脑,点击管理 右击"TCP/IP"选择"属性"(或双击"TCP/IP"),选择"IP地址"选项卡,最下面有个& ...
- xmpp搭建服务器
二.环境配置1.安装mysql2.修改mysql的帐户的密码>sqlite(移动平台) ,是没有密码直接连接数据库>mysql sqlServer (服务端的数据库) 是有帐户和密码 默 ...
- SRM 584 第一次玩TopCoder。。。只水题一道。。。
第一次topcoder,以前老感觉没有资格去做tc,cf什么的,现在已经慢慢接触了. 感觉还可以,还是有让我们这些蒻菜安慰的水题. tc的确很好玩,用客户端比赛,还有各种规则,而且还是只编写一个类提交 ...
- oracle 逗号分割,列转行,行转列
SQL代码 列转行 select REGEXP_SUBSTR(a.rolecode ,,l) rolecode from ( select 'a,aa,aaa' rolecode from dual ...
- Express 4.x Node.js的Web框架
为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/SJQ. http://www.cnblogs.com/shijiaqi1066/p/3821150.html ...
- kafka集群安装与配置
一.集群安装 1. Kafka下载: 可以从kafka官方网站(http://kafka.apache.org)上找到下载地址,再wgetwget http://mirrors.cnnic.cn/ap ...