浅谈移动端rem的用法

梦里梦外; 2022-06-16 03:24 320阅读 0赞

一 什么是rem？

“font size of the root element 这是w3c的定义

也就是说是相对于根节点（html节点）的字体大小的单位。

目前主流的浏览器基本都支持rem这个单位，大部份的默认字体单位是16px。

1149975-20170503143315336-1381017782.png

图片摘自 http://caniuse.mojijs.com/Home/Html/item/key/rem/index.html

二 简单应用。

既然确定在各个主流浏览器都能食用的话，我们就放心大胆在移动端进行开发了。

举个例子说明

复制代码

  1. html{
  2. font-size:62.5%; /* 10÷16=62.5% */
  3. }
  4. p{
  5. font-size:14px;
  6. font-size:1.4rem;
  7. }

复制代码

由于我们选定的浏览器默认字体为16px，将根节点html设置为 font-size:62.5%;，这样换算下来的话 1rem = 10px ，在单位的计算方便将会方便很多。

三 响应式使用。

在实际开发过程中，不论是移动端还是pc端都要兼容各种分辨率的设备，所以实际尺寸是要响应式的。

假如说上个例子的62.5%是基于iPhone5的尺寸，也就是说是320*568的尺寸

如果是ipad尺寸的时候，只要相应的扩大倍数即可

  1. @media only screen and (min-width: 768px){
  2.     html {
  3.         font-size: 150%!important;
  4.     }
  5. }

注：利用媒体查询，可根据自己的实际需要，设定不同的尺寸。

四 rem的进阶使用

先甩上地址 https://github.com/amfe/lib-flexible

说起移动端适配，怎么能少了淘宝的移动端~

这个教程足够详细了（如果绝对还不够的话，可以参考下这个地址 https://github.com/amfe/article/issues/17 ，其中还有现成的demo）。

在引入flexible.js过后，关于px转成rem的方法：

在sublime中是有直接转换的插件，有兴趣的童鞋可以去研究下。

在sass/less预编译下也可快速计算当前尺寸。

发表评论

表情：
评论列表 （有 0 条评论，320人围观）

还没有评论，来说两句吧...

相关阅读

    相关 浅谈移动端开发技术

    浅谈移动端开发技术 前言 之前上家公司主要是做移动端 H5 开发的，但相关技术和配套体系已经很成熟了，很难接触到背后的这套体系。 在现在的公司也做了一些零散的 H

    我就是我我就是我/ 0 赞/ 380 阅读

    相关 浅谈BroadcastReceiver的用法

    　　最近看了下关于广播方面的东西，加深了理解，也纠正了自己以前的不正确的看法。 　　关于广播有2中注册方式，一种是在代码中注册，也叫动态注册，另一种是在AndroidMa

    比眉伴天荒比眉伴天荒/ 0 赞/ 255 阅读