移动端使用rem布局

1、了解移动端px和pc端px的区别

移动端的px其实指的是pt，也就是逻辑分辨率。以iphone6为例，宽度是750px，但是在css中iphone6的宽度是375px，也就是375pt，而设计稿一般是750px的。所以在移动端中css的px是设计稿中px的一半。

将设计稿中的px转换为移动端中的px：

如果设计稿是750px的，在其中有一个宽高都是100px的div，则在移动端的css中我们写50px。

2、使用rem布局移动端

上面我们了解了移动端中的px和pc端的区别，但是移动端我们一般不使用px，因为每个屏幕大小不一，我们要的是尺寸随屏幕的宽度变大，这里就引入的rem的使用。

rem是相对根字体(html元素)的fontsize来自动变化的，如果fontsize设置为50px(移动端px)，则iphone6的宽度就是7.5rem。相当于把375px的宽度平分成7.5份，每份是1rem=50px(移动端px)=100px(设计稿px)。

上面是以iphone6为例的，如果在其他屏幕上，我们就需要动态的给html元素设置一个fontsize。代码如下：

/**
 * 移动端使用rem布局，750是设计稿750px的意思,如果设计稿是其他尺寸则将750改一下，这样，7.5rem就代表横向宽度
 */
(function (doc, win) {
    var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
      };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

将以上js文件引入每个页面，则动态设置了每个页面的根元素的fontsize。
在iphone6上1rem=100px(设计稿)。

例如（以750px的设计稿为例）：
设计稿上有一宽高为100px的div，则我们设置其宽高为1rem。
设计稿上有一宽度一半(375px)的div，我们设置其为3.75rem。
设计稿上有一36px的字体，我们设置其font-size为 0.36rem。

这样设置后，在更大屏幕上的div尺寸和字体都会随宽度等比例变大。

参考链接：
移动端web开发PX单位问题
为什么设计稿是750px
对于页面适配，你应该使用px还是rem
移动端界面设计之尺寸篇
移动端rem自适应布局(切图)