媒体查询：针对不同设备，显示不同的样式。
设备像素比：dpr device-piexl-ratio
在he开发中，要一个3陪高清图片；
1080>=320*3 （主要是为了解决图片的失真问题）
移动端忌讳出现x轴滚动条，所以要使用overflow-x:hidden; (一般在html/body标签上设置)
box-sizing:border-box 解决移动端一些问题；
看移动端设备，我们所作的页面只能在浏览器中打开
查看浏览器的信息： window.navigator.usetagent属性上，我们可以通过这个用来检测设备
var reg=/ipad/;
if(reg.test(window.navigator.userAgent)){ 说明是苹果设备 }
css通过media all and (-webkit-device-pixel-ratio:3.0) 设置像素比；
js获取像素比：window.device-pixel-ratio
移动端的主体需要js和css调整；
max-width:640px （主体的宽基本都这样设）
position:fixed; 改变元素的本质；
rem：移动端适配
input；
input标签在android系统上不带圆角，在ios上带圆角；
input,botton{
-webkit-appearance:none;
}
a标签，在移动端会有一个高亮效果，
去除高亮效果：
a{
-webkit-tap-highlight-color:transparent;
}
布局方式：
双飞翼
圣杯
弹性
自适应
中间固定，两端自适应的案例
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
.box>div:nth-of-type(1){
flex:1;
}
.box>div:nth-of-type(2){
width:600px;
}
.box>div:nth-of-type(3){
flex:1;
}
中间自适应，两端固定
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
.box>div:nth-of-type(1){
width:100px
}
.box>div:nth-of-type(2){
flex:1
}
.box>div:nth-of-type(3){
width:100px
}
原生写移动端事件，用户效果很差，所以我们使用了zepto.js的插件，
zepto插件与jQuery极其相似；
zepto的优势：
zepto是手机端的框架，和jQuery最大的区别，jQuery对ie做了太多的处理，而zepto不需要，且压缩后仅有9kB，（轻量级）
1.文档加载zepto打头；
zepto(function(){
})
2.选择器：使用$("")，进行元素选取，与jQuery一样；
3.$.each()：对数组，集合，对象进行遍历
4.$.map()：对数组加工，得到新数组；
$.each与$.map的区别？
each中的回调，第一个参数索引，第二个参数是元素，