文档章节

css3 px、em和rem

zwjjap
 zwjjap
发布于 2015/10/08 14:36
字数 531
阅读 75
收藏 1

1、先观察关系的转换(http://pxtoem.com/)


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特点 

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


一个例子:

{font-size:14px; font-size:0.875rem;}

注意: 

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

用法:

html {font-size: 62.5%;}  --10/16 = 62.5%
body {font-size: 1.2rem;}  --1.2*10px = 12px
h1 { font-size: 2.4rem;}  --2.4*10px = 24px


备注:字体是字体,宽度是宽度。字号的百分比跟宽度是无关的

本文转载自:http://bbs.xiongguoyi.com/thread-313-1-1.html;http://blog.csdn.net/xudanna/article/details/16...

共有 人打赏支持
zwjjap
粉丝 13
博文 198
码字总数 21945
作品 0
武汉
程序员
私信 提问
讲解css单位px、em、rem的含义

一、首先介绍一下px px就是css中最基本的长度单位了,用px做单位基本上没什么问题,可以做到让页面按套路精确的展现 px是相对于显示器分辨而言的 如果全篇用px布局会暗藏一个蛋疼的问题,就是...

浮躁的码农
2016/02/24
113
0
理解css中的长度单位

很基础的一个问题,但是,其实看起来很复杂的样子~~我们来捋一捋吧~~ css3中也对css中用到的单位进行了改进,单位也就是那几个,所以我们要搞清楚再用。 %——百分比 in——寸 cm——厘米...

哈狮子
2016/10/18
3
0
HTML&CSS基础学习笔记1.29-像素和相对长度

像素和相对长度 前面的html博文,我们提到过用属性width、height来设置图片的尺寸,它们的单元都是”px(像素)”。 长度单位总结一下,目前比较常用到px(像素)、em、% 百分比,要注意其实...

MayaTeacher
2016/09/15
10
0
CSS3的REM设置字体大小

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

张涛泽
2017/04/19
0
0
彻底弄懂css中单位px和em,rem的区别

rem:rem一般用于设置字体的大小,1rem就是html根元素的字体大小,2rem就是html字体大小的2倍,1.5rem是html字体的1.5倍,0.75rem则是html字体大小的四分之三,依此类推。 因此,rem是一个相...

hhj187
2016/08/24
11
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring应用学习——AOP

1. AOP 1. AOP:即面向切面编程,采用横向抽取机制,取代了传统的继承体系的重复代码问题,如下图所示,性能监控、日志记录等代码围绕业务逻辑代码,而这部分代码是一个高度重复的代码,也就...

江左煤郎
今天
2
0
eclipse的版本

Eclipse各版本代号一览表 Eclipse的设计思想是:一切皆插件。Eclipse核心很小,其它所有功能都以插件的形式附加于Eclipse核心之上。 Eclipse基本内核包括:图形API(SWT/Jface),Java开发环...

mdoo
今天
1
0
SpringBoot源码:启动过程分析(一)

本文主要分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 还是老套路,先把分析过程的时序图摆出来:时序图-SpringBoot2.10启动分析 二.源码分析 首...

Jacktanger
今天
3
0
小白带你认识netty(二)之netty服务端启动(上)

上一章 中的标准netty启动代码中,ServerBootstrap到底是如何启动的呢?这一章我们来瞅下。 server.group(bossGroup, workGroup);server.channel(NioServerSocketChannel.class).optio...

天空小小
今天
3
0
聊聊storm trident batch的分流与聚合

序 本文主要研究一下storm trident batch的分流与聚合 实例 TridentTopology topology = new TridentTopology(); topology.newStream("spout1", spout) .p......

go4it
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部