前端进行移动端开发的时候，因为移动端的设备大小种类繁多，如果按照pc端的方式进行开发，则需要很繁琐，要写很多适配移动端设备的样式，这个工作量太大，而且移动端设备尺寸更新太快，所以每个都要写样式，这显然很不合理。
那么有没有更好的方法在移动端进行开发呢？
这里小小的介绍一个常用的移动端开发适配的方法。
1.添加<meta name="viewport">
为什么要添加这个meta便签呢？这个说来话长，有些历史原因。不过需要说明的是，我们平时写的页面内容，在移动端显示的时候，移动端浏览器会把浏览器的设备宽度模拟成980px宽度来进行解析页面。也就是说，我们的网页在移动端显示，和pc上在一个宽度为980px宽的浏览器上显示的比例效果是一样的。
移动端浏览器有这个解析过程，但我们并不想要这个980px的效果，我们想要和设备宽度一直比例的显示内容。
这就是要添加<meta name="viewport">的原因了。
添加meta便签，也不是单单只需要写meta的name属性就行了，一般我们根据需求来写属性content的内容，下面是常用的meta便签书写内容。
<meta name="viewport" content="width=device-width,inital-scale=1,user-scalable=0">
content属性的内容有很多，这里设置了内容宽度（width=device-width）和初始缩放比例（inital-scale=1）和用户是否可以缩放（user-scalable=0），更多内容请另行查阅，不深入说明。
2.媒体查询media
解决了移动端的980问题后，我们可以在直接写移动端样式了。但是我们写移动端内容的时候，又要如何同时兼容pc端的内容呢？这里介绍一个CSS3的新特性，媒体查询（media）。
媒体查询的使用方式有两个。
一个是直接在css样式内容用，添加@media(...){...},符合括号()内容的条件,则使用大括号{}中的样式。
...
@media(max-width:768px){
a{ ...}
body{...}
...
}
可以使用媒体查询查询不同尺寸时，应执行的样式内容。
@media(max-width:768px){
a{ ...}
}
@media(max-width:1000px){
a{ ...}
}
@media(max-width:1200px){
a{ ...}
}
另一个是在link引用外部样式时，声明使用
<link href=".../style.css" media="(max-width:768px)" >
这里只介绍media简单的用法，media更多内容，详见 Media MDN
3.动态rem
有了媒体查询的方式适配不同的尺寸样式，开发效率提高了很多。但是多个尺寸的时候，还是得书写多个尺寸的媒体查询。这个解决的方式，就是在一个范围内，就写一套样式，让它自己适配不同的设备尺寸，同时保持页面比例不变化。
这就需要我们rem单位了。
首先说明rem是什么。
要说rem，就想说明下什么是em，这里初略说明下，em是一个字体的大小单位。1em就是当前元素的font-size的大小。例如，body的font-size大小为16px；则在body定义一个1em的单位时，就是16px。
这时，就能理解rem了，rem是根元素的em大小值。我们知道，网页的根元素为html，也就是说rem是html元素的font-size大小。
em——当前元素font-size值
rem——根元素font-size值
了解了什么是rem以后，我们其实知道了其实rem是字体的大小单位，但是我们适配的是宽度单位，让内容自适应宽度，怎么让这两个转换呢？只需要把根元素html的font-size设置成和设备宽度（或者浏览器宽度）一样大小就可以使用类似百分比的效果了。这个有两种方法，第一种可以使用js动态设置rem，第二种是使用sass把px转rem。
3.1 js设置rem
<script>
var htmlWidth = document.documentElement.clientWidth;
document.write(" <style> html{ font-size: " + htmlWidth + "px}</style>")
<script/>
这时，就可以使用rem的单位来进行书写宽度单位了。1em = 设备宽度（浏览器的宽度）
当设备尺寸变化的时候，页面的比例是没有变化的，可以很好的适不同移动端尺寸的效果。
使用示例
div{
width:0.5rem;
height:0.1rem;
}
值得注意的是，因为font-size的属性是可以继承的，html元素的font-size会继承给它的所有后代元素。
我们知道html元素有两个子元素，body和head元素，我们只需要给body元素设置回想要的额font-size，body的后代元素就会继承body的font-size了。简单的说，就是再单独给body设置一个font-size。
如果时，不想用太多小数，则可以把font-size的比例调整。 1rem =设备宽度/10
<script>
var htmlWidth = document.documentElement.clientWidth;
document.write(" <style> html{ font-size: " + htmlWidth/10 + "px}</style>")
<script/>
这时，原本写0.1rem的样式，就可以写1rem。这个根据个人想法调整。并不是绝对的。
值得注意的是，谷歌浏览器设置了最小font-size是12px，如果设置小于12px的大小，都只会使用最小的12px大小。所以设置font-size比例大小的时候，也不能设置太小。
3.2 px自动转rem
除了使用js动态设置生成rem外，还有一种方式是，使用sass设置px转rem。这里使用node-sass实现（node-sass安装另行查询）。
@function px($px){ //px转rem函数
@return $px/$designWidth +rem;
}
$designWidth : 750; //设计稿的尺寸宽度
body{
width:px(750); //直接使用设计稿元素宽度，自动转rem
height:px(1334);
}
以上是移动端做适配时的常用方案。前端开发日新月异，以后还会有更多的方案出现。这里只讲一个范例。无需钻牛角尖。
