css3整理（四）

标签：

响应式设计

弹性盒模型、百分比宽高、媒体查询

适用什么？
对于重内容的网站，例如形象展示，则比较适合使用响应式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");
            }

css3整理（四）

标签：

原文地址：http://www.cnblogs.com/daqianbi/p/5903797.html