从淘宝和网易的font-size思考移动端怎样使用rem？

最近翻了一下关于移动端的rem的使用，怎样最方便。在读到流云诸葛的一篇关于《从网易与淘宝的font-size思考前端设计稿与工作流》的文章后，来总结一下。

然而根据我以往做移动端web项目的时候，设计稿一般是640或者750的，我一般会在head里面这样写：

<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"><!-- width取值与页面定义的宽度一致 -->

做移动端活动的时候结构也一般这样：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta content="yes" name="apple-mobile-web-app-capable"> <!-- ios7.0版本以后，safari上已看不到效果,可以删除-->

  <meta content="black" name="apple-mobile-web-app-status-bar-style">

  <meta content="telephone=no" name="format-detection">

  <meta content="email=no" name="format-detection">

  <title>viewport通用</title>

  <script type="text/javascript">

    var phoneWidth = parseInt(window.screen.width);

    var phoneScale = phoneWidth / 750;

    var ua = navigator.userAgent;

    if (/Android (\d+\.\d+)/.test(ua)) {

        var version = parseFloat(RegExp.$1);

        if (version > 2.3) {

            document.write('<meta name="viewport" id="vie" content="width=750, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');

        } else {

            document.write('<meta name="viewport" id="vie" content="width=750, target-densitydpi=device-dpi">');

        }

    } else {

        document.write('<meta id="vie" name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi, minimal-ui">');

    }

  </script>

  <link style="text/css" rel="stylesheet" href="home.css">

  <script type="text/javascript" src="js/app.js"></script>

</head>

<body>

    <!--页面内容-->

</body>

</html>

一般的移动页面通用写法：

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

也就是下面要想总结的。

在博客园白树的博文中有一段指出，如果html5要适应各种分辨率的移动设备，应该使用rem这样的尺寸单位，同时给出了一段针对各个分辨率范围在html上设置font-size的代码：

html{font-size:10px}

@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}

@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}

@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}

@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}

@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}

@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}

@media screen and (min-width:800px){html{font-size:25px}}

在实际项目中，把与元素尺寸有关的css，如width,height,line-height,margin,padding等都以rem作为单位，这样页面在不同设备下就能保持一致的网页布局。举例来说，网页有一个.item类，设置了width为3.4rem，该类在不同分辨率下对应的实际宽度如下：

321px <= device-width <= 375px，font-size:11px        --->  .item的width：(11*3.4)px

376px <= device-width <= 414px，font-size:12px        --->  .item的width：(12*3.4)px

415px <= device-width <= 639px，font-size:15px        --->  .item的width：(15*3.4)px

640px <= device-width <= 719px，font-size:20px        --->  .item的width：(20*3.4)px

720px <= device-width <= 749px，font-size:22.5px      --->  .item的width：(22.5*3.4)px

750px <= device-width <= 799px，font-size:23.5px      --->  .item的width：(23.5*3.4)px

800px <= device-width         ，font-size:25px        --->  .item的width：(25*3.4)px