文档章节

简单理解rem的用法

JSON_P
 JSON_P
发布于 2016/12/03 14:55
字数 387
阅读 38
收藏 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
闵行
前端工程师
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
在BAT文件中实现对空格分割的字符串的处理

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

27号
2015/08/19
0
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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

java大数据转换16进制转10进制

public static void main(String[] args) {String hex = "0xdbf3accc683297cf0000";BigInteger amount = new BigInteger(hex.substring(2), 16);System.out.println(amount);......

任梁荣
昨天
1
0
OSChina 周六乱弹 —— 目测我们程序员丁克的几率不大

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @真Skr小机灵鬼儿:8.13分享Jocelyn Pook/Russian Red的单曲《Loving Strangers》 《Loving Strangers》- Jocelyn Pook/Russian Red 手机党少...

小小编辑
昨天
9
3
TypeScript基础入门 - 函数 - 剩余参数

转载 TypeScript基础入门 - 函数 - 剩余参数 项目实践仓库 https://github.com/durban89/typescript_demo.gittag: 1.2.1 为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能...

durban
昨天
1
0
OpenCV边缘检测算子原理总结及实现

1. 拉普拉斯算子 原理:是一种基于图像导数运算的高通线性滤波器。它通过二阶导数来度量图像函数的曲率。 拉普拉斯算子是最简单的各向同性微分算子,它具有旋转不变性。一个二维图像函数的拉...

漫步当下
昨天
0
0
Spring源码阅读——1

开始读Spring源码吧,看再多的技术博客,不如自己看一下~~~~~ Spring源码目前在github中,新版本基于gradle构建。所以阅读源码需要先安装github和gradle。 spring中git地址 1、安装git(略)...

叶枫啦啦
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部