beidan

Home >Web Front-end >HTML Tutorial >rem详解及使用方法 - beidan

rem详解及使用方法 - beidan

WBOY
WBOYOriginal
2016-05-22 17:19:341654browse

好像有一段时间没有写博客了……今天刚好总结一下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单位设置成相应的百分比即可;

例子:

<span style="color: #008080;">1</span> <span style="color: #000000;">/*16px * 312.5% = 50px;*/
</span><span style="color: #008080;">2</span> html{font-size: 312.5%;}
<span style="color: #008080;">1</span> <span style="color: #000000;">/*50px * 0.5 = 25px;*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">body{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    font-size: 0.5rem;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    font-size\0:25px;
</span><span style="color: #008080;">5</span> }

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

<span style="color: #008080;">1</span> <span style="color: #000000;">html{font-size:62.5%;} 
</span><span style="color: #008080;">2</span> <span style="color: #000000;">body{font-size:12px;font-size:1.2rem ;} 
</span><span style="color: #008080;">3</span> p{font-size:14px;font-size:1.4rem;}
  • 优点

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

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

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

又是午睡时间,如果本文有不正确的地方,请指出^_^

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn