相信大家对移动端页面开发不会太陌生吧，但是它和PC页面之间究竟有什么差别呢？
1.响应式布局
所谓响应式布局，核心内容就是media了,它类似与if的写法
@media (条件){
/* css语句 */
}
举个栗子:
在屏幕分辨率为320px与980px之间的div会加上background:red的css样式
@media (max-width:980px and min-width:320px){
div{
background: red;
}
}
ps:写法类似的如 @supports,CSS3的条件判断就只有2个：
其一是“@media”规则，主要用来“根据媒体属性区分样式表。
其二是“@supports”规则，在不支持CSS3的浏览器下实现渐进增强式设计。
/* 如果浏览器支持display:flex,section加上display:flex和background: red;样式 */
@supports (display:flex) {
section {
display: flex;
background: red;
}
}
/* 如果浏览器不支持display:flex,section加上float:left和background: green;样式 */
@supports not (display:flex) {
section {
float: left;
background: green;
}
}
2.media_viewport和rem
<meta name="viewport" content="width=device-width,user-scalable=0,initial-scale=1.0" />
相信大家对以上代码并不陌生吧，这是移动端页面必须加的meta，这个对下面的html fontSize的计算有着影响，最常用的conten属性t就上面写这3个，记住这三个基本就行了。
如果不加上这段meta viewport clientWidth将会被解析成浏览器默认值，例如980px、1024px等，最终会影响到html的font-size计算~~
说到rem就不得不提及em，em是相对字体大小来定义，例如一个div的font-size：12px 那么它的2em就相当于24px了
而rem是相对于html标签的font-size，因此我们想要写出一些随着屏幕大小变化而变化的页面（兼容不同分辨率的页面），我们可以考虑用rem这个单位，我们也只需要在每次window.onload的时候计算一下
window.onload = function(){
//designWidth/自己喜欢的字体大小 = 846px/100px = 8.46
//我们采用基准fontSize是100是便于计算，设计稿上的px转化为rem只需要除以100
document.documentElement.style.fontSize = document.documentElement.clientWidth/8.46 + ‘px‘;
}
所以一般我们用 实际设备宽度/（设计稿宽度/100） 来计算出html fontSize的大小，到时候所有的单位大小都安装设计稿的1/100倍来写就ok了，当然我们把100直接换成1也是ok的，这样会更方便，主要看个人习惯。
ps:有些开发者也喜欢用百分比来定义html fontSize 例如62.5%,绝大部分浏览器默认字体大小都为16px，所以62.5%*16 = 10，化成10px就方便写样式了~
3.touch事件
1.单点
主要包括touchstart touchmove touchend，当然这是dom3的事件，要兼容的话最好写成事件绑定（addEventListener）的形式为好~~