rem 的用法及详解

rem的使用方法：

首先，先说一个常识，浏览器的默认字体高都是16px。步入正题-----〉

兼容性：

目前，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。

就算对不支持的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

使用%单位方便使用

css中的body中先全局声明font-size=62.5%，这里的%的算法和rem一样。
因为100%=16px，1px=6.25%，所以10px=62.5%，
这是的1rem=10px，所以12px=1.2rem。px与rem的转换通过10就可以得来，很方便了吧！

使用方法
注意，rem是只相对于根元素htm的font-size，即只需要设置根元素的font-size，其它元素使用rem单位设置成相应的百分比即可；

例子：

1 /*16px * 312.5% = 50px;*/
2 html{font-size: 312.5%;}
1 /*50px * 0.5 = 25px;*/
2 body{3     font-size: 0.5rem;
4     font-size\0:25px;
5 }

一般情况下，是这样子使用的

1 html{font-size:62.5%;}
2 body{font-size:12px;font-size:1.2rem ;}
3 p{font-size:14px;font-size:1.4rem;}

优点
用一个东西肯定要知道它的好处啦，由于其他字体大小都是基于html的，所以在移动端做适配的时候，可以使用这样的方法

 1 @media only screen and (min-width: 320px){2   html {3     font-size: 62.5% !important;4   }5 }6 @media only screen and (min-width: 640px){7   html {8     font-size: 125% !important;9   }
10 }
11 @media only screen and (min-width: 750px){12   html {13     font-size: 150% !important;
14   }
15 }
16 @media only screen and (min-width: 1242px){17   html {18     font-size: 187.5% !important;
19   }
20 }

（增加js处理部分，供参考，待理解）

基本思路就是：利用rem单位，就是相对于跟（html）字体的大小，来计算相应元素的宽高

一般将html的font-size设置为：20px或30px或50px或100px
还有利用浏览器默认自己大小(16px)也就是16px*62.5%=10px，这样就是html{font-size:62.5%;}，而不是html{font-size:10px;}因为浏览器（PC）最小就是12px。这样一来1rem = 10px；
我们来简单的看一下：

<div id="wrap"> <div id="div1">我是一个div标签</div>
</div>

CSS设置样式

#wrap{    font-size: 20px;}
#div1{    font-size: 1em;  width: 16em;   height: 2em; background-color: lawngreen;
}

效果如下：

这里说一下为啥不用em，因为em是相对于父级字体大小的，这样一层套一层比较麻烦，还有就是当我想改变其中一个div的字体大小时，整个布局就乱套了
还有一个问题就是当我们的浏览器窗口发生大小变化时，原来的布局是不是也应该完美的显示呢。这里我们就利用js来根据浏览器可视区(clientWidth)来重新给html设置响应的字体大小

/* 这里我们利用了一个自执行函数 */
(function(){  change();  function change(){     /* 这里的html字体大小利用了一个简单书序公式（十字相乘），当我们默认设置以屏幕320px位基准此时的字体大小为20px(320    20px),那么浏览器窗口大小改变的时候新的html的fontSize（clientWidth  新的值）就是clientWidth*20/320 */document.documentElement.style.fontSize = document.documentElement.clientWidth*20/320 + 'px';  }    /* 监听窗口大小发生改变时 */window.addEventListener('resize',change,false);})();

注意：一般情况下我们利用rem单位来设置元素的宽高就行，没必要页面中的所有元素都用rem来弄（当然了这个也得看具体需求了）

作者：datura_lj
链接：https://www.jianshu.com/p/65f80d4b44bb
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

这样子就能做到仅仅改变html的字体大小，让其他字体具有“响应式”啦。

rem 的用法及详解相关推荐

文本查找查找命令的grep 、egrep、fgrep用法的详解
文本查找查找命令的grep .egrep.fgrep用法的详解一.学习目标了解并能熟悉运用grep.egrep.fgrep命令. 二.学习内容 1.grep.egrep.fgrep命令的意思和用法 ...
python scatter参数详解_matplotlib.pyplot.scatter散点图结构及用法||参数详解
matplotlib.pyplot.scatter(x, y, s=None, c=None, marker=None, cmap=None, norm=None, vmin=None, vmax=N ...
python编程字典100例_python中字典(Dictionary)用法实例详解
本文实例讲述了python中字典(Dictionary)用法.分享给大家供大家参考.具体分析如下: 字典(Dictionary)是一种映射结构的数据类型,由无序的"键-值对"组成. ...
python语言中with as的用法使用详解
本篇文章主要介绍了python语言中with as的用法使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 With语句是什么? 有一些任务,可能事先需要设置,事后做 ...
[系统安全] 四十四.APT系列(9)Metasploit技术之基础用法万字详解及防御机理
您可能之前看到过我写的类似文章,为什么还要重复撰写呢?只是想更好地帮助初学者了解病毒逆向分析和系统安全,更加成体系且不破坏之前的系列.因此,我重新开设了这个专栏,准备系统整理和深入学习系统安全.逆向分 ...
css中的单位换算_css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firef ...
php curl详解用法[真的详解]
php curl详解用法[真的详解] 目前为目最全的CURL中文说明了,学PHP的要好好掌握.有很多的参数.大部份都很有用.真正掌握了它和正则,一定就是个采集高手了. PHP中的CURL函数库(Cl ...
mysql数据库select语句用法_mysql学习笔记之完整的select语句用法实例详解
本文实例讲述了mysql学习笔记之完整的select语句用法.分享给大家供大家参考,具体如下: 本文内容: 完整语法去重选项字段别名数据源 where group by having order ...
strncpy()函数用法及其详解
strcpy()函数用法及其详解 strcpy()和strcat()函数都有相同的问题,他们都不能检验目标空间是否能够容纳源字符串的副本. 所以,拷贝字符串用strncpy()函数更加安全描述: C ...

rem 的用法及详解

rem 的用法及详解相关推荐

最新文章

热门文章