文档章节

简单理解rem的用法

JSON_P
 JSON_P
发布于 2016/12/03 14:55
字数 387
阅读 33
收藏 0
点赞 0
评论 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 ⋅ 0

在BAT文件中实现对空格分割的字符串的处理

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

27号 ⋅ 2015/08/19 ⋅ 0

移动前端开发和 Web 前端开发的区别是什么?

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

名字已被取 ⋅ 2016/02/27 ⋅ 0

简单的个人帮助系统

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

长平狐 ⋅ 2012/10/23 ⋅ 0

讲解css单位px、em、rem的含义

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

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

windous批处理

1.ECHO 显示信息,或将命令回显打开或关上。 ECHO [ON | OFF] ECHO [message] 要显示当前回显设置,键入不带参数的 ECHO。 2.PAUSE 暂停批处理程序,并显示以下消息: 请按任意键继续. . . 3...

小思绪跌跌撞撞仰望天空 ⋅ 2016/08/23 ⋅ 0

Css3媒体查询使用

css3媒体查询技术的出现,在多设备支持上为我们提供了解决方案。 媒体查询的使用方法: 在设备窗口宽度小于480时,下面的样式会被采用,不满足这个查询设置,下面定义的css是无效的,html根本...

透笔度 ⋅ 2016/02/17 ⋅ 0

【基础】EM 还是 REM?这是一个问题!

简言 应用象 和 这种相对长度单位进行页面排版是WEB开发中的最佳实践。在页面排版中较好应用 和 ,根据设备尺寸缩放显示元素的大小。这就使得组件在不同设备上都达到最佳的显示效果成为可能。...

毛三十 ⋅ 04/20 ⋅ 0

布局方式 - 前端进阶之路

页面布局的方式总是随着技术的更新和创意的涌现不断的更新换代。从最开始的 固定布局「Fixed」到因为宽屏设备和移动互联网的普及产生的响应式和自适应,再到「Mobile First」的设计理念,前端...

果汁凉茶丶 ⋅ 01/07 ⋅ 0

使用Flexible实现手淘H5页面的终端适配--大漠

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代,为了处理各终端的适配而乱了手脚。对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页...

拉普拉斯婷 ⋅ 2016/12/15 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

熊掌号收录比例对于网站原创数据排名的影响[图]

从去年下半年开始,我在写博客了,因为我觉得业余写写博客也还是很不错的,但是从2017年下半年开始,百度已经推出了原创保护功能和熊掌号平台,为此,我也提交了不少以前的老数据,而这些历史...

原创小博客 ⋅ 33分钟前 ⋅ 0

LVM讲解、磁盘故障小案例

LVM LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。 1.新建分区,更改类型为8e 即L...

蛋黄Yolks ⋅ 52分钟前 ⋅ 0

Hadoop Yarn调度器的选择和使用

一、引言 Yarn在Hadoop的生态系统中担任了资源管理和任务调度的角色。在讨论其构造器之前先简单了解一下Yarn的架构。 上图是Yarn的基本架构,其中ResourceManager是整个架构的核心组件,它负...

p柯西 ⋅ 今天 ⋅ 0

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 今天 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 1

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

创建新用户和授予MySQL中的权限教程

导读 MySQL是一个开源数据库管理软件,可帮助用户存储,组织和以后检索数据。 它有多种选项来授予特定用户在表和数据库中的细微的权限 - 本教程将简要介绍一些选项。 如何创建新用户 在MySQL...

问题终结者 ⋅ 昨天 ⋅ 0

android -------- 颜色的半透明效果配置

最近有朋友问我 Android 背景颜色的半透明效果配置,我网上看资料,总结了一下, 开发中也是常常遇到的,所以来写篇博客 常用的颜色值格式有: RGB ARGB RRGGBB AARRGGBB 这4种 透明度 透明度...

切切歆语 ⋅ 昨天 ⋅ 0

CentOS开机启动subversion

建立自启动脚本: vim /etc/init.d/subversion 输入如下内容: #!/bin/bash## subversion startup script for the server## chkconfig: 2345 90 10# description: start the subve......

随风而飘 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部