移动端适配

媒体查询

所谓的响应式页面都是用媒体查询做的

/*如果设备宽度在0-800px则生效*/
@media (max:width: 800px){
    /*css code*/        
}

/*设备宽度在321px-375px时生效*/
@media (min-width: 321px) and (max-width:375px){
    /*css code*/
}

/*语法*/
@media (查询条件){
    /*css code*/
}

/*也可以在link标签上使用*/
/*当设备宽度在0-320px之间才会生效，但始终会下载*/




//宽度=设备宽度，用户无法缩放，初始缩放倍数1.0 最大/最小缩放倍数1.0

---

移动端特性

• 没有hover
• 有touch事件
• 记录touch开始的位置和结束的位置，相减就能得到用户滑动的方向
• 没有滚动条
• 没有resize

---

动态REM-手机专用的自适应方案

什么是REM：

• px：像素
• em：一个m的宽度
• rem：root em 根元素(html)的font-size
• 例如html的font-size为16px，那么1rem = 16px

页面默认的font-size是16px

Chrome浏览器默认的最小字号是12px，所以不允许设置12px以下的font-size，即使你设置在12px以下，显示的字体大小依旧是12px

rem和em的区别
em是等于当前元素的font-size
rem是根元素的font-size

动态rem
手机端无法做响应式

只能采取两种方案

• 百分比布局
• 缺点：高度无法确定，如果一个按钮宽高比为2:1，此方法做不到
• 整体缩放
• 使用rem来做

于是这就有了动态REM方案

使用JS让根元素的font-size等于设备的宽度，然后我们知道 1rem = 根元素的font-size
所以自需要根据设计图上的百分比来写就好了

但是请记住 12px原则 ！！ font-size不能小于12px！！！还要记得写meta:vp

在需要写特别小的单位时，比如border，可以用px，还有font-size，最好是所有屏幕的字体大小都一样

但是这样很麻烦，我们每次都要计算百分比，所以接下来我们将将如何用SASS将px变成rem

• 安装node-sass
• npm install node-sass -g
• node-sass main.scss -w main.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;
}