解决移动端，wap站，m站适配方案整理

概念：所谓移动端的适配，就是不同手机（屏幕尺寸/分辨率）上作等比例的缩放，给予用户更好的体验效果；

首先，我们可以看到网上出现的一些关于移动端适配的技术方案：

1. 框架式：Bootstrap，mui、amaze UI 等等…
   (代码量多，维护难，自定义开发麻烦，可用于后台管理/pc/简单式的网站)
2. 比分比%或者flex，这个是根据手机大小进行百分比/flex缩放； （不够灵活，像素大小都是px的，做出来也会跟设计稿有较大的出入）
3. rem+flex+%布局法，rem为主导，利用viewport的特性，这里不作详解；推荐这个

当然不是说1和2不好，毕竟项目上自定义开发的比较多，3目前还是最适合开发移动端的项目。
不同的是每个公司用到的技术栈不同，有的vue，react，jq等等，或者跨平台的uni-app，mpvue，taro等等，核心思想懂就okay…

viewport 是用户网页的可视区域：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

我们先来看看2个知名m站（其他的网站原理类似），我们一般用到的设计稿是750px居多，那么下面以iphone7进行查看，自行查看像素大小的变化。

淘宝：https://main.m.taobao.com/
js控制font-size进行处理，用的是px单位主导的


以上图，我们可以看到，这里的图标大小是px

美团：https://i.meituan.com/
js控制font-size进行处理，用的是rem单位为主导


以上图，我们可以看到，设计稿是80px*80px的图标，这里就写.8rem就okay了，这里主要是js控制好初始化了，下面会发那个js代码，放心哈…

其他的m站原理类似的，看下大平台的写法，写多了自然会的。

个人推荐 : 美团的写法比较适合些，rem+flex+%，rem主导，flex和%是灵活配合使用的，还有优化上可以一些微调的，当然不能傻傻的全是rem，哈哈，会遇到界面问题的嘿…

———————————————————————————

当你开发你的移动端网站先加入下面这个：

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

核心js代码

// 控制移动端布局
!function (window) {
    /*移动端设计稿宽度，如你设计稿是其他的修改这750即可*/
    var docWidth = 750,
        doc = window.document,
        docEl = doc.documentElement,
        rsizeEvt = 'orientationchange' in  window ? 'orientationchange' : 'resize';
    var recalc = (function refreshnRem() {
        var clientWidth = docEl.getBoundingClientRect().width;
        /*大于一定的尺寸之后不再缩放*/
        docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth/docWidth),11.2),8.55)*5 + 'px';
        return refreshnRem;
    })();
    docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi)? window.devicePixelRatio:1);
    if(/iP(hone|od|ad)/.test(window.navigator.userAgent)){
        doc.documentElement.classList.add('ios');
        if(parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1],10 >=8)){
            doc.documentElement.classList.add('hairline');
        }
        if(!doc.addEventListener) return;
        window.addEventListener(rsizeEvt,recalc,false);
        doc.addEventListener('DOMContentLoaded',recalc,false);
    }
}(window);

原理是js动态获取屏幕宽度，直接设置html的font-size值进行总控制的；

如何使用：

比如你设计稿有1张图片宽高是100px*100px的，那么你写width:1rem; height:1rem;即可；
比如你的文字是24px，那你就写font-size:.24rem或者0.24rem，前面的0是可以省略掉的；

大概是这样吧，如上描述的不清晰或开发的过程遇到什么问题，可留言一下…

源码会持续更新到公众号，需要可以关注一下哦…