文档章节

简单理解rem的用法

JSON_P
 JSON_P
发布于 2016/12/03 14:55
字数 387
阅读 41
收藏 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
博文 18
码字总数 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
485
0
讲解css单位px、em、rem的含义

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

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

没有更多内容

加载失败,请刷新页面

加载更多

Spak—— sparkCore源码解析之RangePartitioner源码

   分区过程概览 RangePartitioner分区执行原理: 计算总体的数据抽样大小sampleSize,计算规则是:至少每个分区抽取20个数据或者最多1M的数据量。 根据sampleSize和分区数量计算每个分区的...

freeli
13分钟前
1
0
从内部自用到对外服务,配置管理的演进和设计优化实践

本文整理自阿里巴巴中间件技术专家彦林在中国开源年会上的分享,通过此文,您将了解到: 微服务给配置管理所带来的变化 配置管理演进过程中的设计思考 配置管理开源后的新探索 配置中心控制台...

阿里云官方博客
14分钟前
0
0
MySQL用户管理,常用MySQL语句、MySQL数据库备份恢复

12月6日任务 13.4 mysql用户管理 13.5 常用sql语句 13.6 mysql数据库备份恢复 13.4 mysql用户管理 grant all on *.* to 'user1' identified by 'passwd'; grant SELECT,UPDATE,INSERT on db......

zgxlinux
15分钟前
1
0
Spring异常之Druid – unregister mbean error

Spring异常之Druid – unregister mbean error 2017年04月19日 12:13:42 Dr.Zhu 阅读数:6688 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zt_fucker/arti...

linjin200
20分钟前
1
0
微信小程序webview问题

今天在改小程序的时候在使用webview的时候切换webview的地址行为,出现了诡异的情况。 默认querystring里会有多个?符号,使用的时候被微信给截取了,导致程序找不到改页面。 而且querystri...

钟元OSS
23分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部