移动端开发小记_移动端开发博客-CSDN博客

`meta`

在我们开发移动端的时候，首先在head里面写入如下的代码

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

其中，几点需要注意的是

width=device-width 这段代码是让布局视口的尺寸等于理想视口。
设备像素比（DPR） = 设备像素个数 / 理想视口像素个数（device-width）

因为我们拿到的设计稿通常是以iPhone6为标准的即375*667；而设计稿是750，所以这时候我们会把设计稿的所对应的盒子宽度写成1/2的大小；即宽度200px的写成100px；
但是，如果我们能将布局视口的尺寸设置为和设备像素尺寸相等的话，这样我们就保证了设计图与页面的1:1关系，那么我们就可以直接使用psd中测量的尺寸了，然后在其他尺寸的手机中，我们进行等比缩放就ok了。
这时候，我们可以这样写

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

一个CSS像素的宽度 = 一个设备像素的宽度；将CSS像素缩小为原来的0.5倍。

但是我们这是有个前提的，那就是缩放0.5倍只适用于设备像素比为2的设备（因为缩放值 = 1 / 设备像素比）。所以，为了适应所有的设备，我们应该用javascript代码动态生成meta标签：

var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

`rem`

1、拿到设计图，计算出页面的总宽，为了好计算，取100px的font-size，如果设计图是iPhone6的那么计算出的就是7.5rem，如果页面是iPhone5的那么计算出的结果就是6.4rem。
2、动态设置html标签的font-size值：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 以rem为单位的页面总宽 + 'px';

如iPhone6的设计图就是：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

iPhone5的设计图就是：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';

3、做页面是测量设计图的px尺寸除以100得到rem尺寸。
4、和淘宝的做法一样，文字字体大小不要使用rem换算。
下面是这种做法的html模板：

<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
    body{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 2rem;
        height: 2rem;
        background: red;
    }
    </style>
</head>
<body>
    <div class="box">200px宽高</div>
    <script>
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
    </script>
</body>
</html>

另外，无论是第一种做法还是第二种做法，我们都提到了，文字字体大小是不要换算成rem做单位的，而是使用媒体查询来进行动态设置，比如下面的代码就是网易的代码：
代码片段一：

@media screen and (max-width: 321px) {
    body {
        font-size:16px
    }
}

@media screen and (min-width: 321px) and (max-width:400px) {
    body {
        font-size:17px
    }
}

@media screen and (min-width: 400px) {
    body {
        font-size:19px
    }
}

代码片段二：

@media screen and (max-width: 321px) {
    header,footer {
        font-size:16px
    }
}

@media screen and (min-width: 321px) and (max-width:400px) {
    header,footer {
        font-size:17px
    }
}

@media screen and (min-width: 400px) {
    header,footer {
        font-size:19px
    }
}