beidan

Rumah hujung hadapan web html tutorial rem详解及使用方法 - beidan

rem详解及使用方法 - beidan

May 22, 2016 pm 05:19 PM

好像有一段时间没有写博客了……今天刚好总结一下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%;}
Salin selepas log masuk
<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> }
Salin selepas log masuk

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

<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;}
Salin selepas log masuk
  • 优点

用一个东西肯定要知道它的好处啦,由于其他字体大小都是基于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> }
Salin selepas log masuk

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

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

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Mar 04, 2025 pm 12:32 PM

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?

Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Mar 17, 2025 pm 12:27 PM

Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?

Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Mar 20, 2025 pm 06:05 PM

Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?

Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Mar 04, 2025 pm 02:39 PM

Bagaimana cara menambah kesan strok kepada imej PNG di laman web?

Apakah tujuan & lt; meter & gt; unsur? Apakah tujuan & lt; meter & gt; unsur? Mar 21, 2025 pm 12:35 PM

Apakah tujuan & lt; meter & gt; unsur?

Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Mar 17, 2025 pm 12:20 PM

Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?

Apakah tujuan & lt; DATALIST & GT; unsur? Apakah tujuan & lt; DATALIST & GT; unsur? Mar 21, 2025 pm 12:33 PM

Apakah tujuan & lt; DATALIST & GT; unsur?

Apakah tujuan & lt; kemajuan & gt; unsur? Apakah tujuan & lt; kemajuan & gt; unsur? Mar 21, 2025 pm 12:34 PM

Apakah tujuan & lt; kemajuan & gt; unsur?

See all articles