文档章节

简单理解rem的用法

JSON_P
 JSON_P
发布于 2016/12/03 14:55
字数 387
阅读 40
收藏 0

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

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

其实可以学习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 这样啦。

原文:http://blog.csdn.net/fgdfgasd/article/details/51992954

© 著作权归作者所有

共有 人打赏支持
JSON_P
粉丝 7
博文 17
码字总数 9688
作品 0
闵行
前端工程师
在BAT文件中实现对空格分割的字符串的处理

Bat代码 @echo off REM 待处理的字符串 set str="AAA BBB CCC" :STR_VISTOR REM 看看每次循环后的值,便于理解 echo str = %str% REM FOR语句是按行进行遍历,也就是一行一次循环,对于我们来...

27号
2015/08/19
0
0
css3 px、em和rem

1、先观察关系的转换(http://pxtoem.com/) em优缺点 1. em的值并不是固定的; 2. em会继承父级元素的字体大小。 所以我们在写CSS的时候,需要注意两点: 1. body选择器中声明Font-size=62....

zwjjap
2015/10/08
69
0
移动前端开发和 Web 前端开发的区别是什么?

1,普通pc端开发与移动端开发区别。 普通pc端开发,我理解就是你拿电脑打开的网页都算【这不是废话么】。 那么移动端前端开发工程师,说白了就很好理解了,做手机网页的前端开发工程师。 这么...

名字已被取
2016/02/27
285
0
简单的个人帮助系统

编程的时候,需要参考许多的帮助,一个有良好组织习惯的人,一般会把需要用到的帮助都放到同一个文件夹里边,当要用到的时候,直接到文件夹中打开相应的帮助就可以了。但是bigtall的做法和大...

长平狐
2012/10/23
80
0
讲解css单位px、em、rem的含义

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

浮躁的码农
2016/02/24
113
0

没有更多内容

加载失败,请刷新页面

加载更多

线性一致性和 Raft

作者:沈泰宁 在讨论分布式系统时,共识算法(Consensus algorithm)和一致性(Consistency)通常是讨论热点,两者的联系很微妙,很容易搞混。一些常见的误解:使用了 Raft [0] 或者 paxos ...

TiDB
20分钟前
0
0
兄弟连区块链教程以太坊源码分析core-state-process源码分析

## StateTransition状态转换模型 /* The State Transitioning Model 状态转换模型 A state transition is a change made when a transaction is applied to the cu......

兄弟连区块链入门教程
22分钟前
0
0
linear-gradient渐变中的参数

在看张鑫旭的博客 遇到渐变数值后面带参数不太理解 @supports (-webkit-mask: none) or (mask: none) { .box { border: none; background: linear-gradient(to bottom, #34538...

红羊在厦门
23分钟前
0
0
Python yagmail模块自动发邮件

Python发邮件yagmail模块 import yagmail#连接服务器yag=yagmail.SMTP('xx@163.com','yy','smtp.163.com')#邮箱正文contents=["test","email send"]#发送邮件#yag.send('...

小白兔_球球
24分钟前
1
0
pada mysql

CREATE SCHEMA `exchange` DEFAULT CHARACTER SET utf8mb4 ;

qwfys
33分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部