移动端适配方法总结

以下都是自己用过的，问题挺多，担心忘了所以来总结一下，欢迎大家指点，嘿嘿

1.rem布局

说起rem,刚开始接触觉得好牛逼呀，有了它各种手机适配统统搞定，但是踩了好多坑，当时项目紧张，终于完成，第二天就告知有些手机无法适配，当时还在想啥破玩意手机辣么多问题，心塞，心塞，心塞，说正经的

刚开始用的时候我基本都是根据设计稿，手动换算成rem，之后我就用了scss,一下所有的适配我都用了scss，我觉得scss特别好，写css时候不仅速度快，而且终于不用想名字了，不用想那些各种class名字太美好了，所以给大家推荐用scss,使用它换算.(推荐可以用webstorm使用scss不用配置辣么多的环境了，虽然我最喜欢用的是sublime，轻便，webstorm一打开，再打开Ps我的电脑就彻底报废了)

1.1使用css3的媒体查询

首先rem是指相对于根元素的字体大小的单位，所以可以通过设置html的字体大小来可以控制rem的大小

@charset "utf-8";
@import "px2Rem";
@media screen and (min-width:321px) and (max-width:375px) {
  html {
    font-size: 12px
  }
}

@media screen and (min-width:376px) and (max-width:414px) {
  html {
    font-size: 13px
  }
}

@media screen and (min-width:415px) and (max-width:639px) {
  html {
    font-size: 15px
  }
}

@media screen and (min-width:640px) and (max-width:719px) {
  html {
    font-size: 20px
  }
}

@media screen and (min-width:720px) and (max-width:749px) {
  html {
    font-size: 22.5px
  }
}

@media screen and (min-width:750px) and (max-width:799px) {
  html {
    font-size: 23.5px
  }
}

@media screen and (min-width:800px) {
  html {
    font-size: 25px
  }
}

@import 是scss引入scss文件的一种写法，‘px2Rem’是一个公有的scss，用来把px转换成rem,每一个scss都引入这个公有的即可，以下是设计稿为750px的写法：(为啥除以24我也忘了，几个月之前写的，但是只要是750px的设计稿就是这样，谁要是知道可以告诉我，谢谢)

1508464369(1).png

除了以上这两个公有的css其余都正常写，例如以下，每次写上px都是：px2Rem（量取的px）,如下

@charset "utf-8";
@import "px2Rem";
@import "common";

#banner{
  height: px2Rem(443);
  width: 100%;
  img{
    width: 100%;
    height: 100%;
  }
}
#introduce{
  width: 100%;
  background:#f2f4f7 ;
  .intro_up{
    width: 100%;
    height: auto;
    background: url("../images/js_tc.png") no-repeat center center;
    background-size: 100% 100%;
    box-sizing: border-box;
    margin-bottom: px2Rem(11);
    p{
      display: flex;
      display: -webkit-flex;
      align-items: center;
      padding: px2Rem(31) px2Rem(7.5) px2Rem(20) px2Rem(7.5) ;
      border-bottom: px2Rem(2) solid #eee;
      font-size: px2Rem(30);
      i{
        width: px2Rem(71);
        height: px2Rem(49);
        background: url("../images/jianjie-.png") no-repeat center center;
        background-size: 100% 100%;
        margin-right: px2Rem(19);
        margin-left: px2Rem(34.5);
      }
    }

总结：这个方法适配不管是微信，还是手机目前都适配，测试过华为，oppo,iphone，ipad,中兴，型号都木有错。

1.2js动态设置html的fontsize大小

动态加载meta标签设置html的fontsize

var scale = 1 / window.devicePixelRatio;
var meta = document.createElement('meta');
meta.setAttribute('name','viewport');
meta.setAttribute('content','initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no');
document.querySelector('head').appendChild(meta);
var fontSize = document.documentElement.clientWidth/10;
document.querySelector('html').style.fontSize = fontSize +'px';

写一个共有的scss,换算px

$designWidth:750;
$remCount:10;

@function px2Rem($px){
  @return $px/$designWidth*$remCount * 1rem
}

之后调用的方法就和第一个方法一样
总结：这是我最开始使用的，不管是微信端还是浏览器都是相当不错，但是后来发现对于一些oppo,中兴手机的部分型号不适配，听朋友说还有华为的p9,解决的方法就是判断，然后重新计算fontsize。

1.3淘宝的flexible.js

首先我想说的是，这里我也用了sass:
第一步：引入一个flexible.js(木有写Meta这个标签)
第二步：写一个共有的common.scss

@function px2Rem($px){
  @return $px/(750/10) * 1rem
}
@mixin font-dpr($font-size){
    font-size: $font-size;

    [data-dpr="2"] & {
        font-size: $font-size * 2;
    }

    [data-dpr="3"] & {
        font-size: $font-size * 3;
    }
}

第三步：在index.scss引用common.scss(本来我准备用rem写字体大小，但是听说rem换算的字体不好看就用px吧)

@charset "utf-8";
@import "common";
*{
    margin: 0;
    padding: 0;
    max-height: 9999999px;
}
ul{
    list-style: none;
    width: 100%;
    height: px2Rem(100);
    background: pink;
    @include font-dpr(17px);
    text-align: center;
    line-height: px2Rem(100);
}
li{
    display: inline-block;
}
article{
    @include font-dpr(10px); 
}

总结：这种方法的使用网上应该很多，比我详细，以上是我的方法，大同小异。

2.百分比+弹性盒布局

不管是用哪种布局我都习惯性用弹性盒布局，display:flex,我觉得相当的美好，不用一点点的去量宽度，而且可以替换浮动，也不用清除浮动，不管是PC还是移动都是不错的，有时候懒得用rem我就是用百分比+弹性盒，但是，各位请注意，兼容性问题考虑一下，弹性盒的集中兼容写法注意一下，手机端感觉是各种通用的，浏览器兼容一般，主流OK的，但是IE10以下估计完蛋。

 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
//垂直居中
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
//子元素分割
-webkit-box-pack: justify;
-moz-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-around;
justify-content: space-around;

总结：没有辣么严格的兼容要求，这个简直棒棒哒。

3.直接使用一种标签

直接在页面写以下三句话

<meta name="viewport" content="width=640,target-densitydpi=device-dpi, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">

如果设计图是640直接就把width写成了640px，然后按照设计图量取的px直接写就可以了
总结：目前自己测试的结果是没有出现不适配的，字体也写成px,相当的方便，就是只限制于宽度适配，高度会出现偏差，但是如果项目允许出现滚动条就完全不碍事，不影响布局啥的，但是如果想做h5页面那种一屏一屏的不带滚动的，不建议你使用，说好的高度有偏差，直接用百分比或者rem吧。

关于字体的显示大小，与在CSS中指定的大小不一致

说明：之前用rem做的一个项目，一个段落的字数超过了一定数量，字体的大小立马就变大了，我明明写的是16px的字体，进入比32px都大，瞬间无语了，后来可劲找，在github找到了方法，https://github.com/amfe/article/issues/10#issuecomment-305942512（这是那个人的详解）。
解决方法：
方法1.max-height：99999999999px;
方法2. text-size-adjust: none;（兼容性不好，毕竟是属于新属性）

html,body,div,span,p,i,img,a,h1,h2,h3,h4,h5,h6,dd,dl,dt,header,footer,article,ul,li{
  margin: 0;
  padding: 0;
  max-height: 999999px;
  text-size-adjust: none;
  -webkit-text-size-adjust:none;
}

关于在微信端使用rem布局的时候，底部会出现内容不全面，或者滚动的时候中间内容不全面

说明：例如顶部和底部固定，中间滚动，但是在微信端，应该是页面计算了微信端固定的顶部，所以会出现底部内容不全面
解决方法：中间不写固定高度，只写margin-bottom和margin-top.

body{
      display:flex;
      flex-direction: column;
}
header,footer{
      flex:1;
      position:fixed
}

目前就这么多，其他的没想到，好久了，小菜鸟一枚，先记录下来，然后慢慢改正，完善，欢迎挑刺，毕竟我的问题太多。