文档章节

简单理解rem的用法

JSON_P
 JSON_P
发布于 2016/12/03 14:55
字数 387
阅读 81
收藏 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
博文 19
码字总数 9688
作品 0
闵行
前端工程师
私信 提问
加载中

评论(0)

移动端布局方案,简单高效,完美适配各种机型

第一步:使用淘宝的lib/flexible+rem布局 原理:   rem布局:使用rem作为元素大小的单位,rem=fount-size,根据不同的屏幕宽度设置不同的fount-size值,这样元素也会跟着屏幕变大或变小  ...

osc_xgq4n4ik
04/16
3
0
手淘的移动端适配方案flexible

基于 vue-cli 配置手淘的 lib-flexible + rem,实现移动端自适应 安装 flexible 引入 flexible在项目入口文件 main.js 中添加如下代码,引入 flexible px 转 rem使用 webpack 的 px2rem-loa...

osc_uarhdl2n
2018/09/02
2
0
css3 px、em和rem

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

zwjjap
2015/10/08
107
0
在BAT文件中实现对空格分割的字符串的处理

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

27号
2015/08/19
1.3K
0
vue-cli 配置flexible px2rem-loader安装配置

原文网址:https://segmentfault.com/a/1190000011883121#articleHeader2 基于vue-cli配置手淘的lib-flexible + rem,实现移动端自适应 没接触过flexible的建议先看看大漠的这篇文章这样你才...

osc_qqjot4oj
2018/03/08
2
0

没有更多内容

加载失败,请刷新页面

加载更多

如何用数据结构解释计算机系统 常用数据结构

详细:https://www.cnblogs.com/morui/p/10726864.html 数据结构(计算机存储、组织数据方式) 数据结构是计算机存储、组织数据的方式。数据结构是指相互之间存在一种或多种特定关系的数据元...

osc_rnx2cje5
26分钟前
23
0
黑客你咋这么牛掰,不屑用鼠标?

如需快速跳转,请戳以下蓝色字条 01 前情提要 02 有苦说得出 1、黑客开发绝大多数工具是没有图形化界面的 2、命令行更有助于批量操作 3、图形化界面消耗系统资源量大,增加计算机性能负担 4、...

osc_m6gaz63w
28分钟前
20
0
计算机网络TCP/IP模型复习笔记(随时补充)

看到一篇大佬的博客,刚好前段时间也有简单了解了一点计算机网络的TCP/IP,就顺便总结一下。 大佬文章链接: https://blog.csdn.net/ThinkWon/article/details/104903925 计算机网络的自己理...

osc_boqyoaed
29分钟前
17
0
IDEA使用技巧-->查看类的继承关系图

IDEA使用技巧-->查看类的继承关系图 简单实用(很实用) 转自 ☞https://www.cnblogs.com/deng-cc/p/6927447.html 最近忙,有用的直接拿来给大家分享,但凡分享的都是我亲测有效的!...

宇宝
30分钟前
21
0
浏览器同源政策及其规避方法

自己以思维导图的形式梳理了一遍 浏览器同源政策及其规避方法

酒窝yun过去了
31分钟前
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部