如何使用rem单位
最近搞移动端,真是被rem、em与px的换算要了老命了,看了不少文档,似乎弄明白了,这不今天用又蒙圈了。
好多文档上老是说用rem就给html设置font-size,用em就给body设置font-size
看了下bootstrap样式表,html {font-size:62.5%;} body {font-size:14px;},其他样式略哈,就讲这两个主要的。
可惜大姐长了这么大眼睛,从昨天到今天一直把em看成了rem,导致越算越郁闷……好不说了,解释如下:
其实可以学习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 这样啦。
以上是我自己总结的,如有错误,欢迎大家来指正哦~~
如何使用rem单位的更多相关文章
- WebApp开发之--"rem"单位
随着web app的兴起,rem这是个低调的css单位,近一两年开始崭露头角,有许多朋友对于它的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我认为rem是用来做web app它绝对是 ...
- rem单位和em单位的使用
今天弄了一点响应式的东西,本以为很快就可以弄好,结果还是绕晕了头,所以还是写下来方便下次看吧! 一开始我打算用百分比%来做响应式布局,后来算的很懵圈,就果断放弃了,哈哈是不是很明智. 接下来就是rem ...
- 移动端rem单位用法[转]
标签: 1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单 ...
- rem单位在手机网站中的使用
em单位是相对于父节点的font-size,会有一些组合的问题,而rem是相对于根节点(或者是html节点),也就是说你可以在html节点定义一个单独的字体大小,然后所有其他元素使用rem相对于这个字 ...
- 关于使用rem单位,calc()进行自适应布局
关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单位在 ...
- WebApp开发之--"rem"单位(转)
随着web app的兴起,rem这是个低调的css单位,近一两年开始崭露头角,有许多朋友对于它的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我认为rem是用来做web app它绝对是 ...
- gulp.spritesmith修改px为rem单位
移动端开发中,使用gulp.spritesmith进行小图sprite并生成样式,但由于spritesmith默认是以px为单位,所以就把插件的内容修改了下让生成rem单位并且能把background ...
- rem单位
rem单位 rem基础 px是固定单位,不同分辨率下效果不一样,导致网页布局出现偏差. em是根据父元素来改变字大小 rem是根据根元素html来改变字体大小,只要改变了根元素的font-size就可 ...
- 段落p元素内的响应式文本布局就靠rem单位实现
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8&qu ...
- 关于使用rem单位、css函数calc()进行自适应布局
一.关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单 ...
随机推荐
- Algorithms - Insertion sort
印象 图1 插入排序过程 思想 插入排序(Insertion Sort)的主要思想是不断地将待排序的元素插入到有序序列中,是有序序列不断地扩大,直至所有元素都被插入到有序序列中. 分析 时间复杂度: ...
- “网易大数据讲堂第一期:数说”直播活动资料:课程回放收看及PPT下载
欢迎访问网易云社区,了解更多网易技术产品运营经验. "网易大数据讲堂第一期:数说"直播活动昨晚顺利举行.感谢各位"数"友的支持和参与. 本次活动PPT可点击这里 ...
- Codeforces Round #538 (Div. 2)D(区间DP,思维)
#include<bits/stdc++.h>using namespace std;int a[5007];int dp[5007][5007];int main(){ int n ...
- #6432. 「PKUSC2018」真实排名(组合数学)
题面 传送门 题解 这数据范围--这输出大小--这模数--太有迷惑性了-- 首先对于\(0\)来说,不管怎么选它们的排名都不会变,这个先特判掉 对于一个\(a_i\)来说,如果它不选,那么所有大于等于 ...
- phaser小游戏框架学习(一)
这两天由于项目的需要,所以简单学了一下phaser框架. 官网:http://phaser.io/ 还有一个phaser小站,是中文的网站,但是内容不如英文文档全,大家也可以去看这个网站,需要查阅AP ...
- UESTC 趣味赛命题报告E
https://lutece.xyz/contest/detail/10/ 题目很简单,套路题: 求n个数中选k个数使得gcd最大: 很容易想到,我们只需要将因子分解出来然后计数即可: (只是这个id ...
- kuangbin专题七 POJ3468 A Simple Problem with Integers (线段树或树状数组)
You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operations. One type of op ...
- ssh 配置无密码登录
下框中在管理机上运行: [root@master ~]# ssh-keygen -t rsa #它在/root/.ssh下生成id_rsa和id_rsa.pub两个文件 [root@master ~] ...
- jquery 拖动改变div大小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- FileLoadException: 未能加载文件或程序集"aliyun-net-sdk-cf, Version=1.0.0.0,
清理缓存解决 C:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files C:\Windows\Microsoft. ...