前言

会了PC端开发就会了移动端开发，这个说法没错，只是点击(click)事件变成了触屏事件（touch）,滑轮滚动(scroll)变成了拖曳(scroll)事件。下面就说一下移动端开发的一些坑与技巧。

关于布局

适配移动端

重点：移动端布局一定要在head上加一句话：

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

目的：让整个屏幕显示宽度和手机宽度相等，方式用户缩小和放大。

媒体查询

移动端布局和PC端布局相差很多，当我们缩小时候，某些元素会发生改变，这样会影响用户体验，所以CSS3出现了新的属性 媒体查询（media query）
CSS代码片段：

 @media only srceen and max-width(600px)  and min-width(400px) {
        body{background-color:red;}
  }//屏幕在400px~600px之间背景颜色为红色
 @media only srceen and max-width(1000px)  and min-width(600px) {
        body{background-color:blue;}
  }//屏幕在600px~1000px之间背景颜色为蓝色

这样我们可以根据不同的屏幕大小来切换响应的布局。

交互方式

手机端的交互方式不一样

• PC有hover伪类 移动端没有
• 移动端 touch 事件
• PC有resize 移动端没有
• PC需要滚动条 移动端不需要

PS:电商网站已经不再使用媒体查询了，主要是通过不同屏幕大小来判断使用设备，加载不同的文件实现。 而一些新闻类网站还在使用。

关于字体

在移动端开发中，字体大小问题一直困扰着开发者，但是根据MDN提供的方案，我们可以找到一些方案。

1. 什么是px?

px就是简单的像素单位，适用于固定值

2. 什么是vh/vw?

vh = viewport height = 100vh就是占满全屏高度 vh单位前的值是百分比
vw = viewport width = 100vw就是占满全屏宽度 值同上

3. 什么是em?

宽泛的说是一个m的字体大小，但是应用的时候都会说是一个汉字的大小，主要em继承自身的font-size,如果没有定义font-size会继承父亲的font-size。

4. 什么是 rem?

rem = root em 继承根元素的font-size，一般都是html的font-size

5. rem 和 em 的区别是什么?

区别就是rem只继承根元素的font-size,em继承自身的font-size,两者没有关系。

手机端方案的特点是什么

所有手机显示的界面都是一样的，只是大小不同
1 rem == html font-size == viewport width 一个字的大小

解决方案

使用 JS 动态调整 REM

 <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/10+'px;}</style>') //根据页面的宽度来设定根元素font-size
 </script>

这是一种根据屏幕大小来更改字体大小的解决方案，具有很高的灵活性
当然REM 可以与其他单位同时存在

 font-size: 16px;
 border: 1px solid red;
 width: 5rem;

小结：

CSS3提供了媒体查询属性，我们可以根据不同的屏幕来设计不同的页面，Rem方案让我们的布局在不同的设备下都能等比例的显示，有了这样的思路，这样我们在移动端的开发会更加顺畅。