移动端适配

面试题经常会考到的一道题，移动端如何做适配？今天就来总结一下。

一般分为三个点介绍：

meta viewport
媒体查询 (响应式)
动态rem方案

一. meta viewport
在meta标签中控制viewport(视口)的宽度等于设备宽度，并且禁止用户手动缩放。
代码如下：

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

initial-scale控制页面加载时的缩放等级。
maximum-scale和minumum-scale为用户最大和最小的缩放值。user-scalable表示是否允许用户进行缩放。

二. 媒体查询
有两种方法，第一种在style标签中进行控制，当触发一定的条件时，使得代码发生变化，让页面获得相应的样式。举例代码如下：

  <style>
      @media (min-width:300px) and (max-width:400px){
          body{
              background:green;
          }
      }
      @media (min-width:401px) and (max-width:800px){
          body{
              background:blue;
          }
      }
  </style>

当浏览器窗口宽度在300px到400px时，背景颜色为绿色。当浏览器宽度在401px到800px之间时，背景颜色变为蓝色。

第二种方法：直接引入css文件，并且限定一定的条件，满足条件时触发该文件效果。代码如下：

<link rel="stylesheet" href="style.css"media="(max-width:500px)">

当屏幕宽度小于500px时，触发style.css文件的效果。

无论是否满足media中的条件，打开网页时link标签都已经下载好了，是否生效取决于media的条件。

3.动态rem
rem就是font size of the root element,也就是说rem是相对于元素的。rem是相对于根元素的font-size。如果浏览器默认的字体大小是12px,如果为font-size 设置为2em, 那么字体大小为24px。

html{
font-size:12px;
}
h1{
font-size:2em}// h1的的字体大小为24px

px是相对固定单位，字号大小直接被定死，所以用户无法根据自己设置的浏览器字号而缩放，em和rem虽然都是相对单位，但em是相对于它的父元素的font-size，页面层级越深，em的换算就越复杂，而rem是直接相对于根元素。而移动端新型浏览器对rem的兼容很好可以作为日常使用。

具体rem适配方法如下：
这里需要用到sass，参考SASS使用指南
将scss和css文件关联起来后，写出如下代码

@function px($px){
  @return $px/$designWidht*10 +rem;
}

$designWidth:640 ; // 640指的是原设计稿的宽度。
.xxx{
width:px(320);
height:px(160);
font-size:1.2em;
}

这样就可以直接输入指定的数字得出适配后的宽度、高度、字体大小等。

移动端适配

推荐阅读更多精彩内容