文档章节

css3 px、em和rem

zwjjap
 zwjjap
发布于 2015/10/08 14:36
字数 531
阅读 70
收藏 1
点赞 0
评论 0

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
px,em,rem,vw单位在网页和移动端的应用

px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来 它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度、比例有可能会不同...

刘元兴
2017/05/18
0
0
【干货】前端rem单位的正确使用姿势

简单阐述下px、em、rem之前的关系(其实网上很多,我这里稍微提一下)。 先抛出一个问题:为什么要选择rem? px:像素是相对于显示器屏幕分辨率而言的相对长度单位。pc端使用px倒也无所谓,可...

wecloudnet
2016/05/05
1K
0
说说css中pt、px、em、rem都扮演了什么角色

前段时间,终于仔仔细细的把pt、px、em、rem了解了一遍,简单整理了一下做个记录。 pt、px、em、rem都是什么 pt单位名称为点(Point),绝对长度单位。现在网页中出现得很少甚至不出现,常用...

郑乔尹在旅游
2017/11/23
0
0
前端知识点乱炖之一(HTML/CSS)

前面面试知识总结之HTML/css篇 1.行内元素、块级元素和空(void)元素有哪些? 行内元素:a 、b、span、img、input、strong、select、label、em、button、textarea。 块级元素:div、ul、li、...

w-rain
2016/03/23
61
0
CSS3中的rem值与px之间的换算

看CCS文件的时候发现引入了一个新大小单位:rem,CSS文件里有介绍,看半天拿着手机计算了几下愣是没搞明白,怕是新东西搜出来的都是英文看着累就没找google,而是百度了一下,百度的结果就是...

前端_牛牛
2016/01/20
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

编程语言对比分析:Python与Java和JavaScript(图)

编程语言对比分析:Python与Java和JavaScript(图): 凭什么说“Python 太慢,Java 太笨拙,我讨厌 JavaScript”?[图] 编程语言生而为何? 我们人类从原始社会就是用语言表达自己,互相沟通...

原创小博客
9分钟前
0
0
Akka构建Reactive应用《one》

看到这Akka的官网,描述使用java或者scala构建响应式,并发和分布式应用更加简单,听着很高级的样子,下面的小字写着消息驱动,但是在quickstart里面又写容错事件驱动,就是这么钻牛角尖。 ...

woshixin
21分钟前
0
0
ffmpeg源码分析 (四)

io_open 承接上一篇,对于avformat_open_input的分析还差其中非常重要的一步,就是io_open,该函数用于打开FFmpeg的输入输出文件。 在init_input中有这么一句 if ((ret = s->io_open(s, &s-...

街角的小丑
22分钟前
0
0
String,StringBuffer ,StringBuilder的区别

不同点 一、基类不同 StringBuffer、StringBuilder 都继承自AbStractStringBuilder,String 直接继承自 Object 2、底层容器“不同” 虽然底层都是字符数组,但是String的是final修饰的不可变...

不开心的时候不要学习
37分钟前
0
0
nodejs 文件操作

写文件code // 加载文件模块var fs = require("fs");var content = 'Hello World, 你好世界!';//params 文件名,内容,编码,回调fs.writeFile('./hello.txt',content,'utf8',function (er......

yanhl
40分钟前
0
0
SpringBoot mybits 查询为0条数据 但是在Navicat 中可以查询到数据

1.页面请求: 数据库查询: 2018-07-16 17:56:25.054 DEBUG 17312 --- [nio-9010-exec-3] c.s.h.m.C.selectSelective : ==> Preparing: select id, card_number, customer_id, customer_nam......

kuchawyz
50分钟前
0
0
译:Self-Modifying cod 和cacheflush

date: 2014-11-26 09:53 翻译自: http://community.arm.com/groups/processors/blog/2010/02/17/caches-and-self-modifying-code Cache处在CPU核心与内存存储器之间,它给我们的感觉是,它具......

我叫半桶水
52分钟前
0
0
Artificial Intelligence Yourself

TensorFlow是谷歌基于DistBelief进行研发的第二代人工智能学习系统,其命名来源于本身的运行原理。Tensor(张量)意味着N维数组,Flow(流)意味着基于数据流图的计算,TensorFlow为张量从流...

孟飞阳
今天
0
0
press.one个人数字签名

这是我在press.one的数字签名 https://press.one/p/address/v?s=9d3d5b7ce019af357ab994775549e8f047a5b17fc9893364652fc67e4b95443b38ccb24c6655e0d252dd0154369eb9b7717c4ccf4e1835ca3596......

NateHuang
今天
1
0
Oracle 中的 SQL 分页查询原理和方法详解

本文分析并介绍 Oracle 中的分页查找的方法。 Oracle 中的表,除了我们建表时设计的各个字段,其实还有两个字段(此处只介绍2个),分别是 ROWID(行标示符)和 ROWNUM(行号),即使我们使用...

举个_栗子
今天
4
2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部