使用em和rem替代px
rem是指根元素的字体大小，默认情况下html的字体大小为：16px=1rem。而em是相对单位，是基于它的祖先元素计算的。
如果我们不指定html和body的字体大小，要得到12px的rem需要这样计算：12/16=0.75rem
下面这张图em和px的转换关系是基于父元素是16px的情况下，所以rem也是这样的结果。
但是。这样换算总归有点麻烦，我们总不能写px的时候时刻被一张转换表或者计算器。
我们可以修改根元素html的字体：16*62.5%=10.4px ，约10px 现在，px与rem的关系是这样的：10px=1rem。
这样，我们要得到12px就简单多了：12px=1.2rem
通常，我们会给页面一个默认的12px字体，这样写：
html{font-size:62.5%}
body{font-size:1.2rem}
这一种写法的问题是，因为chrome的最小字体是12px，当我们设置html的font-size为62.5%时，计算出来的字体是10px，但是实际是12px，因此在应用过程中发现，我们使用rem的结果会比估计的篇大一点。
可以采用唯品会的这种写法：
html{font-size:312.5%;}
body{font-size:0.24rem}
NOTICE
在PC上调试时，需要使用Chrome浏览器，因为在使用360急速模式下，可能会发生下面的bug：
看下面的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
html{font-size: 62.5%}
body{font-size:1.2rem;}
</style>
<title>em rem</title>
</head>
<body>
<p>我不是12像素</p>
</body>
</html>
预览结果：
查看控制台computed样式：
16*1.2=19.2 ，可见，body中rem还是基于16px计算的，而不是10px。
但是对于其他元素而言，rem又是10px了，看第二个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
html{font-size: 62.5%}
body{font-size:1.2rem;}
</style>
<title>em rem</title>
</head>
<body>
<p>我不是12像素</p>
<p style="font-size:1.2rem">我真的是12像素</p>
</body>
</html>
结果如下：
使用em和rem替代px的更多相关文章
- EM vs REM vs PX，为什么你不应该”只用px“”
Actually this artical is from other person's opnion ,i just put it into chinese,and this means a ver ...
- 简谈CSS 中的 em，rem，px，%
在实际工作中,可能我们用的比较多的是‘%’ 和 px,但是我们也经常看到很多网站和css框架里用的是em 或rem.而‘%’ 和px已经都是比较常见或者说是常用.但是em 和rem 却鲜有使用,一直以 ...
- CSS中em、rem和px的区别
任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px,1rem=16px. EM特点 1. em的值并不是固定的: 2. em会继承父级元素的字体大小. rem特点 r ...
- css3单位em，rem，px，vw，vh等
昨天发现了个好用的方法去设置手机端的rem单位,在这里记录下. html{ font-size:calc(100vw/7.5);} 这是按照750的设计稿(也就是iphone6的设计稿). 100vw ...
- 关于EM，REM，PX的几点注意
px是绝对单位,不支持IE的缩放,em是相对单位. em指字体高,任意浏览器的默认字体高都是16px.所以未经调整的浏览器都符合: 1em=16px.那么12px=0.75em, 10px=0.625 ...
- 详细讲解css单位px,em和rem的含义以及它们之间的区别
一.首先介绍一下px px就是css中最基本的长度单位了,用px做单位基本上没什么问题,可以做到让页面按套路精确的展现! 可但是!但可是!如果全篇用px布局会暗藏一个蛋疼的问题,就是当用户和Ctrl滚 ...
- 关于px、em和rem的学习笔记！
刚参加前端工作,字体一般使用px来设置大小,在处理响应式界面时对字体的大小变化处理感觉很吃力,得知对字体的大小有三种大小格式设置方式,便想一探究竟,希望可以有所帮助! px px像素(Pixel),相 ...
- css中单位px、pt、em和rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS ...
- px，em，rem
px:像素是相对于显示器屏幕分辨率而言的相对长度单位.pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力,所以就要考虑em和rem. em:继承 ...
随机推荐
- IOS下WEBVIEW 的javascript数组与json定义 及交互
最近在折腾IOS新闻浏览客户端,当中需要用到webview传递JSON数据到IOS上,然后在IOS上解析.刚入门IOS不久,看了不少的书,但都是囫囵吞枣.在开发过程中,遇到不少问题.开发环境mac m ...
- cookie（点心的意思）服务器给客户端的点心
他是用户访问web服务器时,服务器在用户硬盘上存放的信息,好像是服务器给客户端的“点心”.比如:是否记录用户名密码.其中,A服务器不允许访问B服务器存在客户端的cookie 一个cookie包含一对k ...
- html5--3.4 input元素(3)
html5--3.4 input元素(3) 学习要点 input元素及其属性 input元素 用来设置表单中的内容项,比如输入内容的文本框,按钮等 不仅可以布置在表单中,也可以在表单之外的元素使用 i ...
- the art of seo(chapter one)
preface:Andy Johns (@ibringtraffic):growth strategist@Wealthfront ***1.Search Reflecting Consciousne ...
- .Net-Mongodb学习大全网址
http://www.yuanjiaocheng.net/csharpmongo/16.html 介绍 在上一篇文章中,我们继续探索MongoDb .NET驱动程序中的数据序列化. 我们查看了各种属性 ...
- Apktool 和 Jeb 给出的不同的smali语法
今天发现用Apktool和Jeb反编译出来的smali在语法上有一定区别,比如一个Java函数: private void packageNameCheck() { com.example.testf ...
- c++之拷贝构造函数详解
C++中经常使用一个常量或变量初始化另一个变量,例如: double x＝5.0: double y＝x; 使用类创建对象时,构造函数被自动调用以完成对象的初始化,那么能否象简单变量的初始化一样,直接 ...
- $bzoj4569$
$st表+并查集$ $考虑暴力方法:我们每次将对应相等的位置用并查集连起来,那么最终答案就是9*10^{连通块个数-1}$ $很明显上面这个办法过不去,问题在于重复次数太多了,如果一个区间已经对应相等 ...
- java中约瑟夫环代码实现
问题原型: 传说在很久很久以前,有一架搭载着n个人的飞机出现了故障,迫降在了一个荒岛上.飞机彻底报废后,这些人用飞机的残骸建成了一艘只能容纳一个人乘坐的小船,那么怎么去确定这n个人中哪个人有资格上船呢 ...
- node.js 安装 和 配置Sublime Text的Node.js
安装node.js 第一步:下载安装文件: https://nodejs.org/en/download/ 第二步:安装nodejs 下载完成之后,双击"node-v6.10.1-x64.m ...