小叙移动端适配解决方案

题外话

突然被要求教学妹怎么做移动端适配的问题，上一次我写移动端的东西过去好久了，于是又面向百度了一波，网上感觉还是零零散散的，于是决定整理下来，虽有拾人牙慧之嫌，但是总归会清晰省事不少，嘻！(我真是个暖心学长)
Ps：
解决方案概括在最下面"总结"中，上面的都是详细解释，不想看长篇大论者可以直接拖到最下面看解决方案

设置html中meta标签

首先在移动端开发中，需要在前端html的标签中加入

viewport是专为手机浏览器设计的一个meta标签
先看看如果html代码不用这个meta标签的情况下:

css代码跟面条一样长，就不贴了，简述一下：上面的三块每块100px宽，下面的是100%宽
但是由调试的iPhone手机界面来看，理想视口是375px宽

那么问题来了，上面三个块宽度加起来为300px,却不到iPhone375px宽的一半，为什么?

因为有些屏幕很小的智能手机，但分辩率却可以做得很大，传统桌面网站直接放到手机上阅读时，同时该网站没有做移动端优化的网站时，浏览器会尽可能缩小这个网站让用户看到网站的全部内容
所以前端html需要加上meta标签，加上后:

然后用Chrome devTools可以发现下面的100%宽度的div就是375px了，nice!
(弱弱吐槽一句:html代码不加这个meta标签在火狐浏览器中调试也没有问题，它会直接根据理想视图等参数显示出来，但是谷歌浏览器就不会……)
meta中content参数:

1. width = device-width:应用程序的宽度和屏幕的宽度是一样的,也可定死，可以自定义试试看效果
2. height = device-height:应用程序的高度和屏幕的高是一样的
3. initial-scale = 1.0:应用程序启动时候的缩放尺度（1.0表示不缩放）
4. minimum-scale = 1.0:用户可以缩放到的最小尺度（1.0表示不缩放）
5. maximum-scale = 1.0:用户可以放大到的最大尺度（1.0表示不缩放）
6. user-scalable = no:用户是否可以通过他的手势来缩放整个应用程序，使应用程序的尺度发生一个改变（yes/no）

当然，在的背后关于视图及其属性，如布局视图，视觉视图，理想视图……可以参考这篇博客: 深入理解viewport及相关属性的关系

适配不同机型，设置rem单位长度

一般由于移动端各个不同型号手机其宽度不同
所以如果采用px固定住元素:比如你定义了一个div，里面定义了很多子元素，然后在iPhone6浏览器页面上面显示刚好是一行，但是一到iPhone5子元素们就突然换行了，乱成了一只皮皮虾
这是因为iPhone6的手机宽度是750px,iPhone5的宽度是640px,所以把一个750px的东西塞进640px宽的容器中肯定会出问题
(当年本人在实习做移动端页面开发的时候，每每切换到iPhone5总是一阵慌张，因为这个它页面宽度太小了，就很有可能会出现排版混乱的问题)

什么?你说Chrome devTools中显示的iPhone6宽度是375px,iPhone5宽度是320px,这就是另一个问题了，这牵扯到了css逻辑像素和手机物理像素的比例问题了，也就是关于DPR的问题：移动web开发之像素和DPR详解，可以点击这篇博客了解学习
人家珠玉在前，我也就不再长篇累牍地解释了

所以为了解决移动端页面宽高标准繁多的问题,就有这么一个解决思想:

整体布局可以采用百分比、flex布局，一些设计图上固定长度的元素，如按钮等可以使用rem布局

• 什么是rem呢?
  rem：root em，这是一个相对单位，相对于HTML根元素 font-size 属性大小决定其大小
  举个例子:在css样式中设置 html{font-size:20px} 那么 1rem=20px,所以当一个按钮宽度为10px时，可以换算为 width: 0.5rem
• rem怎么做到适配的呢?
  举个例子:在iPhone6中定义 html{font-size:40px} ，然后设置一个按钮为 width: 0.5rem ，这时候它的宽度是20px,然后你切换成iPhone5，在iPhone5中定义了 html{font-size:30px} ，于是这个按钮宽度就变成了15px,因为iPhone5的宽度比较小，所以这个按钮宽度变小后在iPhone5中就不会撑出父元素
  所以只要随着设备的不同改变根元素的 font-size 属性大小，就能让所有以rem作为单位的元素自适应页面宽度
• 那么，什么时候使用rem布局呢?
  根据大佬们的思想，宽度小于页面50%可以使用rem布局，再大就用百分比布局
  因为rem不是万能的，当子元素在父元素中的宽度占比很大时，使用rem，当切换设备时候也有可能会出现排版混乱的情况
• 那么怎么设置改变根元素的 font-size 属性大小从而改变rem大小来适配不同机型呢？
  这里有两种方案:

1. 通过媒体查询来改变 font-size ,进而改变rem
   举个例子:

html {
  font-size: 62.5%
} 
@media only screen and (min-width: 481px) {        //当屏幕宽度小于481px
  html {
    font-size:94%!important
  }
}
@media only screen and (min-width: 561px) {        //当屏幕宽度小于561px
  html {
    font-size:109%!important
  }
}
@media only screen and (min-width: 641px) {        //当屏幕宽度小于641px
  html {
    font-size:125%!important
  } 
  body {
    max-width: 640px
  }
}

这些屏幕最小宽度参数和 font-size 都是根据项目实际需求改变，并不唯一

2. 通过js动态改变 font-size ,进而改变rem
   当页面一加载的时候，js就获取当前设备的宽度，进而设置 font-size

这个script代码可以直接粘贴到html 标签的后面，直接可以使用

640这个宽度参数可以根据设计稿自定义，这里width取640，是根据iPhone5的宽度设置的，将devTools移动设备切换到iPhone5可以看到1rem=50px

总结

关于移动端适配的问题，当然还有其他的一些解决方案，像是淘宝，网易都有自己的解决方案，都比较好，也可以去搜搜且看看他们的解决思想
本文的移动端适配解决思想:

1. 先在html 中设置meta标签:

2.使用rem作为长度单位， 利用css媒体查询或者js动态设置根据页面宽度设置 font-size 从而改变rem,使得页面元素做到最大自适应，代码已经贴在上面了 (*´∀`)skr~