移动端适配方案

移动端适配方案有两种，一种主流的rem大法，兼容性好，一种CSS3新的单位vw，兼容性没有rem好，先来介绍一下rem大法

rem移动端适配

参考腾讯前端 AlloyTeam 团队的移动前端适配利器rem

rem意思就是根据网页的根元素来设置字体大小，和em（font size of the element）的区别是，em是根据其父元素的字体大小来设置，而rem是根据网页的跟元素（html）来设置字体大小的.

设置html根元素的font-size。一般浏览器默认的字体大小是16px，rem表示就是1rem，如果想设置为12px，那就是0.75rem 现在默认的基本单位是16px，这是一个不太好计算的值，所以一般我们使用100px作为单位，那么rem的换算就是，100px/16px = 6.25,

viewpoint设置

网易的做法

initial-scale=1.0,maximum-scale=1.0，屏幕不缩放，改变font-size的值。

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

因为设计稿都是按照iphone678来设计的，宽度都是750px，所以通常按照750px的宽度动态计算一下font-size。如果就是针对iphone的，可以将font-size设置为625%。

function initScreen() {
    if (!/iphone|ios|android|mobile/i.test(navigator.userAgent.toLowerCase())) {
        $('body').css('width', '750px');
    }
    $('html').css('font-size', ($('body').width() / 750 * 625 + '%'));
}

手淘的做法

改变屏幕缩放尺寸，为设备像素比dpr的倒数。dpr=2，initial-scale=0.5，通过meta标签 读取设备宽度。

var scale= 1/ window.devicePixelRatio;
document.querySelector('meta[name='viewport']').setAttribute('content','width=device-width,initial-scale='+scale+'maximum='+scale)
document.documentElement.style.fontSize= document.documentElement.clientWidth / 10 +'px'

media查询设置初值

/* mobile media-query */
html {
    font-size: 312.5%;
}

@media screen and (min-width: 360px) and (max-width: 374px) and (orientation: portrait) {
    html {
        font-size: 351.5%;
    }
}

@media screen and (min-width: 384px) and (max-width: 399px) and (orientation: portrait) {
    html {
        font-size: 375%;
    }
}

@media screen and (min-width: 400px) and (max-width: 413px) and (orientation: portrait) {
    html {
        font-size: 390.625%;
    }
}

@media screen and (min-width: 414px) and (max-width: 431px) and (orientation: portrait) {
    html {
        font-size: 404.3%;
    }
}

@media screen and (min-width: 432px) and (max-width: 479px) and (orientation: portrait) {
    html {
        font-size: 421.875%;
    }
}

@media screen and (min-width: 480px)and (max-width: 639px) and (orientation: portrait) {
    html {
        font-size: 468.75%;
    }
}

@media screen and (min-width: 640px) and (orientation: portrait) {
    html {
        font-size: 625%;
    }
}

vw适配

vw表示窗口大小，单位为百分比，1vw表示窗口大小的1%。根据设计稿，让那个设计稿的宽度为100%，书写的时候就按照 px/设计稿宽度 * 100vw

方案一： 最简单的方案就是所有的布局元素及属性都用VW来做单位，对应关系是： 设计稿 750px------>100vw 那我们书写时计算：(x/750)*100vw sass:

$vw_base: 750;
@function vw($px) {
    @return ($px / 750) * 100vw
}

方案二

$vw_fontsize: 750; // iPhone 6尺寸的根元素大小基准值 
@function rem($px) { 
    @return ($px / $vw_fontsize ) * 1rem; 
  }

1px的问题

原因:css中的1px在移动端上因为设备像素比的原因，并不是1px，会显得比较粗。

解决: 1. 使用border-image。实现准备好1px的border图片， 2. transform: scale(.5)

总结

vw方案目前支持不是很普遍，以后可能会支持比较多，而且使用sass等css预处理器，相对来说比较兼容性不是很好，推荐使用设置font-size，rem作为单位。