最近搞移动端,真是被rem、em与px的换算要了老命了,看了不少文档,似乎弄明白了,这不今天用又蒙圈了。

好多文档上老是说用rem就给html设置font-size,用em就给body设置font-size

看了下bootstrap样式表,html {font-size:62.5%;}  body {font-size:14px;},其他样式略哈,就讲这两个主要的。

可惜大姐长了这么大眼睛,从昨天到今天一直把em看成了rem,导致越算越郁闷……好不说了,解释如下:

其实可以学习bootstrap的这种设置,因为在用到em和rem的时候互不影响,因为rem就是去参照你html的font-size,管你body设不设置,都与我没关系。

一、那么如果你确定要使用rem单位,就按以下三个步骤来计算:

1、确定基数:一般10px,自己记住就行,不用写进代码里

2、html {font-size:百分数;}    百分数=基数/16

  基数10    百分数62.5%

  基数14    百分数87.5%

3、px换算rem   公式=想要的px值/基数

  也就是说,当你设置 html {font-size:62.5%;},你想给容器里的文字设置字号14px,换算成rem就是14px/10——1.4rem 这样子

  (如果自己想要测试的话,拿火狐Firebug测试,因为Chrome下字号低于12px失效哈,如果想设置小于12px的字号,Chrome也有解决方案,自己百度就好)

二、如果使用em单位的时候,计算机就会自己去找你body的设置,才不会管你html是如何设置的呢

比如我们伟大的bootstrap给 body {font-size:14px;} 这样设置后,如果我想要一个14px的外边距,我就用14px/14px——1em 这样啦。

以上是我自己总结的,如有错误,欢迎大家来指正哦~~

如何使用rem单位的更多相关文章

  1. WebApp开发之--"rem"单位

    随着web app的兴起,rem这是个低调的css单位,近一两年开始崭露头角,有许多朋友对于它的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我认为rem是用来做web app它绝对是 ...

  2. rem单位和em单位的使用

    今天弄了一点响应式的东西,本以为很快就可以弄好,结果还是绕晕了头,所以还是写下来方便下次看吧! 一开始我打算用百分比%来做响应式布局,后来算的很懵圈,就果断放弃了,哈哈是不是很明智. 接下来就是rem ...

  3. 移动端rem单位用法[转]

    标签: 1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单 ...

  4. rem单位在手机网站中的使用

    em单位是相对于父节点的font-size,会有一些组合的问题,而rem是相对于根节点(或者是html节点),也就是说你可以在html节点定义一个单独的字体大小,然后所有其他元素使用rem相对于这个字 ...

  5. 关于使用rem单位,calc()进行自适应布局

    关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单位在 ...

  6. WebApp开发之--"rem"单位(转)

    随着web app的兴起,rem这是个低调的css单位,近一两年开始崭露头角,有许多朋友对于它的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我认为rem是用来做web app它绝对是 ...

  7. gulp.spritesmith修改px为rem单位

    移动端开发中,使用gulp.spritesmith进行小图sprite并生成样式,但由于spritesmith默认是以px为单位,所以就把插件的内容修改了下让生成rem单位并且能把background ...

  8. rem单位

    rem单位 rem基础 px是固定单位,不同分辨率下效果不一样,导致网页布局出现偏差. em是根据父元素来改变字大小 rem是根据根元素html来改变字体大小,只要改变了根元素的font-size就可 ...

  9. 段落p元素内的响应式文本布局就靠rem单位实现

    <!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8&qu ...

  10. 关于使用rem单位、css函数calc()进行自适应布局

    一.关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单 ...

随机推荐

  1. DotNet经典面试题(转载)

    .Net基础常见 什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS.CLS.CLR分别作何解释? 答: 1应用程序域可以理解为一种轻量级进程.起到安全的作用 ...

  2. Codeforces 917B MADMAX (DP+博弈)

    <题目链接> 题目大意:给定一个DAG图,其中图的边权是给定的字符所对应的ascii码,现在A先手,B后手,每次沿DAG图走一步,但是第i次走的边权一定要大于等于第i-1次走的边权(这里是 ...

  3. 【Python发展】pandas和koalas

    1.pandas介绍 Python 数据科学在过去几年中爆炸式增长, pandas 已成为生态系统的关键.当数据科学家得到一个数据集时,他们会使用 pandas 进行探索.它是数据处理和分析的终极工具 ...

  4. 解密QQ号

    啊哈~ ---------------------------------------------------------- http://bbs.ahalei.com/thread-4489-1-1 ...

  5. 2019年GPLT L2-1 特立独行的幸福 比赛题解 中国高校计算机大赛-团体程序设计天梯赛题解

    对一个十进制数的各位数字做一次平方和,称作一次迭代.如果一个十进制数能通过若干次迭代得到 1,就称该数为幸福数.1 是一个幸福数.此外,例如 19 经过 1 次迭代得到 82,2 次迭代后得到 68, ...

  6. CF959D Mahmoud and Ehab and another array construction task 数学

    Mahmoud has an array a consisting of n integers. He asked Ehab to find another array b of the same l ...

  7. maven 项目 配置docker镜像生成(dockerfile-maven-plugin)

    插件地址:https://github.com/spotify/dockerfile-maven 依github上备注,只要在项目根上录上编写dockerfile,然后引用插件即可 编写Dockerf ...

  8. react 中文文档案例六 (表单)

    class Reservation extends React.Component { constructor(props) { super(props); this.state = { isGoin ...

  9. MYSQL常用命令笔记(一)

    1.show databases; 显示数据库 2.create database test; 创建数据库test 3.use test: 使用这个数据库 4.创建表class: create tab ...

  10. C语言文件I/O和标准I/O函数

    读取/写入  相对于文件而言 输入/输出 相对于程序/内存而言 一切皆文件,键盘.显示屏也是文件,只不过是特殊的标准文件: 标准文件:标准输入.标准输出.标准错误:---->对应的文件指针:st ...