移动端适配

1. 什么是移动端适配

1. ui设计师根据设计标准设计ui效果图交给web开发人员，web开发人员根据ui设计图完成界面开发.如:

​ 以上是iphone6标准，**750px \* 1334px为准(高度会随着内容多少而改变)**交付给前端的设计图

​ 前端开发人员通过一套适配规则自动适配到其他的尺寸

​

1. 下面是一张手淘适配图:

​

2. 适配方案

### 2.1 传统Flex弹性布局 + px单位

viewport固定：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

宽度自适应，元素都采用px做单位。

随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差不多，在哪个宽度需要调整的时候使用响应式布局调调就行（比如网易新闻），这样就实现了『适配』。

• 适用页面: 新闻，社区

px方案可以让大屏幕手机展示出更多的内容，更符合人们的阅读习惯。

2.2 手机淘宝 flexible.js + rem单位

flexible.js也是rem适配的，它是将设备分成10份，1rem等于1/10

• 需要适配的元素单位用rem.

• 引入flexible.js或使用自己封装的rem.js. 原理：动态改变根元素字体大小fontSize

/* rem.js文件内容 */
(function () {
    var html = document.documentElement;

    function onWindowResize() {
        html.style.fontSize = html.getBoundingClientRect().width / 10 + 'px';
    }

    window.addEventListener('resize', onWindowResize);
    onWindowResize();
})();

• 如果css样式采用scss预处理技术，可以在页面用px作单，通过scss转换

假如设计给的稿子是750px宽的，写scss时1rem也就应该等于75px,那边我么的scss文件可以这样写：

@function px2rem($px, $base: 75) {
    @return ($px / $base) * 1rem;
}
/*
稿子上量得某按钮宽60px,高20px
*/
.btn{
    width:px2rem(60);
    height:px2rem(20);
}

2.3 vw,vh进行适配

1.对于设计稿的尺寸转换为vw单位，我们使用Sass函数编译

//iPhone 6尺寸作为设计稿基准
$vm_base: 375; 
@function vw($px) {
    @return ($px / 375) * 100vw;
}

2.无论是文本还是布局高宽、间距等都使用 vw 作为 CSS 单位

.mod_nav {
    background-color: #fff;
    &_list {
        display: flex;
        padding: vm(15) vm(10) vm(10); // 内间距
        &_item {
            flex: 1;
            text-align: center;
            font-size: vm(10); // 字体大小
            &_logo {
                display: block;
                margin: 0 auto;
                width: vm(40); // 宽度
                height: vm(40); // 高度
                img {
                    display: block;
                    margin: 0 auto;
                    max-width: 100%;
                }
            }
            &_name {
                margin-top: vm(2);
            }
        }
    }
}

3.1物理像素线（也就是普通屏幕下 1px ，高清屏幕下 0.5px 的情况）采用 transform 属性 scale 实现。

.mod_grid {
    position: relative;
    &::after {
        // 实现1物理像素的下边框线
        content: '';
        position: absolute;
        z-index: 1;
        pointer-events: none;
        background-color: #ddd;
        height: 1px;
        left: 0;
        right: 0;
        top: 0;
        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            -webkit-transform: scaleY(0.5);
            -webkit-transform-origin: 50% 0%;
        }
    }
    ...
}

4.对于需要保持高宽比的图，应改用 padding-top 实现

.mod_banner {
    position: relative;
    padding-top: percentage(100/700); // 使用padding-top
    height: 0;
    overflow: hidden;
    img {
        width: 100%;
        height: auto;
        position: absolute;
        left: 0;
        top: 0; 
    }
}

由此，我们能够实现一个常见布局的页面效果如下： 体验地址点击此处

2.4 搭配vw和rem，布局更优化

原文链接：http://caibaojian.com/vw-vh.html

结合rem单位来实现布局？rem 弹性布局的核心在于动态改变根元素大小，那么我们可以通过：·

1. 给根元素大小设置随着视口变化而变化的 vw 单位，这样就可以实现动态改变其大小。
2. 限制根元素字体大小的最大最小值，配合 body 加上最大宽度和最小宽度

这样我们就能够实现对布局宽度的最大最小限制。因此，根据以上条件，我们可以得出代码实现如下：

//code from http://caibaojian.com/vw-vh.html
// rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推
$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
     @return ($px / $vm_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vm_design: 750;
html {
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; 
    // 同时，通过Media Queries 限制根元素最大最小值
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}
// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
    max-width: 540px;
    min-width: 320px;
}

这里就不再给出截图，但你可以点击此处在线地址进行体验。

参考:http://caibaojian.com/vw-vh.html

3. postcss-px-to-viewport插件自动计算vw值

如果设计稿使用750px宽度，则100vw = 750px，即1vw = 7.5px。那么我们可以根据设计图上的px值直接转换成对应的vw值。如果不想自己计算，我们可以使用PostCSS的插件postcss-px-to-viewport，让我们可以直接在代码中写px。

module.exports = {
    plugins: {
        autoprefixer: {},
        'postcss-px-to-viewport': {
            viewportWidth: 750,   // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
            viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
            unitPrecision: 3,     // 指定`px`转换为视窗单位值的小数位数
            viewportUnit: "vw",   //指定需要转换成的视窗单位，建议使用vw
            selectorBlackList: ['.ignore'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
            minPixelValue: 1,     // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
            mediaQuery: false,     // 允许在媒体查询中转换`px`
            replace: true,
            exclude: /(\/|\\)(node_modules)(\/|\\)/,
        }
    }
}