响应式设计
弹性盒模型、百分比宽高、媒体查询
适用什么？
对于重内容的网站，例如形象展示，则比较适合使用响应式web设计
不适用什么？
对于重功能的网站，如电子商务，门户类，则更推荐使用独立移动网站
原因：功能多，页面复杂， 页面体积变大，消耗流量，不如直接做一个轻量级的h5
Web app，便于分离以及定制
(1)使用 viewport meta 标签在手机浏览器上控制布局
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
(2)隐藏苹果浏览器的工具栏和菜单栏。 全屏显示
<meta name="apple-mobile-web-app-capable" content="yes" />
(3)设置Web App的状态栏（屏幕顶部栏）的样式
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />
实际浏览器的布局宽度：
（1） 如果没有设置viewport width=device-width; 此时布局宽度就是980px;(浏览器统一缩放的)；
max-widht指展示的最大宽度，一般是浏览器窗口宽度。
max-device-width是指所展示使用的设备支持宽度，如一般电脑分辨率1280px，手机设备支持展示宽度（安卓有种宽度如360 ，480）等.
(2) 如果设置了，布局宽度就是 ，设备的物理像素/window.devicePixelRatio 。
直接通过chrome 手机浏览器工具查实际浏览器布局宽度
示例：
@media screen and (min-width: 320px) and (max-width:1024px){
div:after{
content: "-大于320px小于1024px";
}
}@media all and (min-width:1024px) {
div:after{
content: "-大于1024px";
}
}@media screen and (orientation:landscape) {
/*横屏 （宽度>高度） */
div{
font-size:100px;
}
}@media screen and (orientation:portrait) {
/*竖屏 （高度>宽度） */
div{
font-size:30px;
}
}
判别浏览器跳转
if(navigator.userAgent.indexOf("iPhone")>-1){
alert("iphone");
//通过动态创建link 标签引入我们css。
//document.createElement("link")
}else if(navigator.userAgent.indexOf("Android")>-1){
alert("android");
}