关于移动端的适配问题

1.使用媒体查询功能

1.使用 @media

@media(conditions){
    //要执行的css
}
或者
@media(conditions1)and(conditions2){
    //csscode
}

例如：

@media(max-width:500px){
    body{
        background:red;
    }
}
或者
@(min-width:300px)and(max-width:800px){
    body{background:red;}
}

当页面宽度小于等于500px设备。页面背景变红。
当设备宽度在（300，800）之间时，页面变红。
2.使用link媒体查询，引入外部的样式表

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

当设备宽度小于320px 时引入的样式表（已经下载了）才会生效
dom.classList.toggle(“active”);

2.添加meta标签

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

历史原因，网页在小屏幕设备上显示时，会被缩小。比如原来1000px的页面要在340px的设备上显示完全，页面就会被缩小的很小，为了解决这个bug，可以再页面顶部加上上面的一行。
苹果利用设备宽度模拟的页面宽度为980px的页面。
viewport：视口
content=”width=device-width”：网页宽度等于设备宽度
user-scalable=no：用户不能缩放
initial-scale=1.0：初始缩放比例为1

3.创建两套htnl和css.后端进行检测设备，根据不同的设备使用不同的html。

手机端的交互方式不一样

没有 hover
有 touch 事件
没有 resize
没有滚动条

手机端专用方案

基本概念

em:一个m的（一个汉字的宽度），相对于父元素字体大小
rem:（html）根元素的font-size,相对于html字体大小
vh \vw

1.使用rem动态设置页面大小。

思路：上面我们知道了单位rem就是html的font-size的大小；所以我可以利用JavaScript获得设备宽度后将html的font-size设为該值即可，代码如下：

<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script>
        var pageWidth = window.innerWidth;
        document.write("<style>html{font-size:"+pageWidth+"px;}</style>");
    </script>
</head>

然后就可以以rem为单位动态的设置页面的宽度和高度了。他会根据不同设备自适应。
！！！！注意，
- 因为font-size会传给后代元素，所以别要忘了设置body{font-size：16px;}来覆盖掉html的font-size；
- meta标签也要加，负责页面会缩放

2.使用sass工具

1.在 SCSS 里使用 PX2REM

npm config set registry https://registry.npm.taobao.org/
touch ~/.bashrc
echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"' >> ~/.bashrc
source ~/.bashrc
npm i -g node-sass
mkdir ~/Desktop/scss-demo
cd ~/Desktop/scss-demo
mkdir scss css
touch scss/style.scss
start scss/style.scss
node-sass -wr scss -o css

编辑 scss 文件就会自动得到 css 文件

在 scss 文件里添加

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

$designWidth : 640; // 640 是设计稿的宽度

.child{
  width: px(320);
  height: px(160);
  margin: px(40) px(40);
  border: 1px solid red;
  float: left;
  font-size: 1.2em;
}

即可实现 px 自动变 rem