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的更多相关文章

  1. 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 ...

  2. 简谈CSS 中的 em，rem，px，%

    在实际工作中,可能我们用的比较多的是‘%’ 和 px,但是我们也经常看到很多网站和css框架里用的是em 或rem.而‘%’ 和px已经都是比较常见或者说是常用.但是em 和rem 却鲜有使用,一直以 ...

  3. CSS中em、rem和px的区别

    任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px,1rem=16px. EM特点  1. em的值并不是固定的: 2. em会继承父级元素的字体大小. rem特点 r ...

  4. css3单位em，rem，px，vw，vh等

    昨天发现了个好用的方法去设置手机端的rem单位,在这里记录下. html{ font-size:calc(100vw/7.5);} 这是按照750的设计稿(也就是iphone6的设计稿). 100vw ...

  5. 关于EM，REM，PX的几点注意

    px是绝对单位,不支持IE的缩放,em是相对单位. em指字体高,任意浏览器的默认字体高都是16px.所以未经调整的浏览器都符合: 1em=16px.那么12px=0.75em, 10px=0.625 ...

  6. 详细讲解css单位px,em和rem的含义以及它们之间的区别

    一.首先介绍一下px px就是css中最基本的长度单位了,用px做单位基本上没什么问题,可以做到让页面按套路精确的展现! 可但是!但可是!如果全篇用px布局会暗藏一个蛋疼的问题,就是当用户和Ctrl滚 ...

  7. 关于px、em和rem的学习笔记！

    刚参加前端工作,字体一般使用px来设置大小,在处理响应式界面时对字体的大小变化处理感觉很吃力,得知对字体的大小有三种大小格式设置方式,便想一探究竟,希望可以有所帮助! px px像素(Pixel),相 ...

  8. css中单位px、pt、em和rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS ...

  9. px，em，rem

    px:像素是相对于显示器屏幕分辨率而言的相对长度单位.pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力,所以就要考虑em和rem. em:继承 ...

随机推荐

  1. Java 8新特性之旅：使用Stream API处理集合

    在这篇“Java 8新特性教程”系列文章中,我们会深入解释,并通过代码来展示,如何通过流来遍历集合,如何从集合和数组来创建流,以及怎么聚合流的值. 在之前的文章“遍历.过滤.处理集合及使用Lambda ...

  2. postNotificationName 消息传递详解

      1.定义消息创建的关联值 也就是找到方法的标志 NSString *const GameToIPhoneNotification = @"GameToIPhoneNotification ...

  3. MongoDB安装及多实例启动

    MongoDB安装及多实例启动 MongoDB简介 MongoDB是一款跨平台.面向文档的数据库.可以实现高性能.高可用性,并且能够轻松扩展,是一个基于分布式文件存储的开源数据库系统,在高负载的情况下 ...

  4. 纯css 图片自适应居中

    html 结构 <div class="container"> <div class="content"></div> &l ...

  5. Java中的双重检查（Double-Check）详解

    在 Effecitve Java 一书的第 48 条中提到了双重检查模式,并指出这种模式在 Java 中通常并不适用.该模式的结构如下所示: ? 1 2 3 4 5 6 7 8 9 10 public ...

  6. 2.row_number() over (partition by col1 order by col2)的用法

    row_number() over (partition by col1 order by col2) 表示根据COL1分组,在分组内部根据 COL2排序,而此函数计算的值就表示每组内部排序后的顺序编 ...

  7. jquery easyui 实战总结

    (2012-09-26 10:22:24) 转载▼ 标签: it 分类: Javascript 一.tree 1.根据node id查找对应的node,然后选择该节点:                 ...

  8. PLSQL ORA-12154 TNS无法解析指定的连接标识符

    若你的机子上Windows 64位操作系统, 将PL Sql 的默认安装目录  Program Files (x86) 文件夹改为Program Files 或者别的便可以了

  9. 使用 StoryBoard 制作一个能够删除cell的TableView

    本篇博客方便自己检索使用.资源链接 下面是制作效果图,点击删除按钮,就能将该cell删除: 下面是主要的代码: #define KSUPER_TAG 20000 #define KDEFAU_TAG ...

  10. HUD-1548

    A strange lift Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...