媒体查询：针对不同设备，显示不同的样式。
设备像素比：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-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){
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){
100px
}
.box>div:nth-of-type(2){
flex:1
}
.box>div:nth-of-type(3){
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中的回调，第一个参数索引，第二个参数是元素，map与他相反，且map必须有return
map返回加工后的新集合；each返回原来的集合
5.add()：添加元素到当前匹配的元素
6.addClass()：为每个元素添加类，多个类用空格隔开；
after()：在每个匹配的元素后添加内容；
before()：在每个匹配元素前面添加内容
append()：在匹配的结尾处插入内容；
after()与append()的区别？
after插入在元素后面，但在元素外；append在元素里；
after()：读取或设置元素的属性；
children()：获取每个匹配元素直接子元素，参数可过滤
css()：读取或设置css属性
zepto中的特效只有show()和hide()
事件：
原生js在移动端的事件
js原生中，只有dom2级事件写法
div.addEventListener("事件名",fn,false)
div.onclick=function(){} dom0级事件；
js有touch系列事件，有click touchstart（触摸） touchmove（移动） touchend（离开） 但效果不好
click就相当于单击，不建议使用，
移动设备，当第一次点击之后，300ms之内又去点击了，说明是双击，300ms内没去点击说明是单击
trouchstart
通过在zepto中在引入touch插件，便可使用zepto中拓展的事件了
分为：点击和滑动；
点击：singleTap（单击） doubleTap（双击） longTap(长按)
滑动：swipe（滑动） swipeLeft(左滑) swipeRight(右滑) swipeUp(上滑) swipeDown(下滑)
zepto中使用事件函数，需要在zepto的后面引入touch.js文件，否则报错
swiper插件 轮播
zepto 中的 on 事件，可以进行绑定事件，最恐怖的是，我们可以进行事件委托的写法
$("body").on("click",".box",function(){
console.log(我是 box 元素，我被点击了) //为什么这样写，1 可以不需要考虑 异步的事件，2. 我们是对 body 的点击事件，但是通过事件委托传递给 box
})