首页 > 代码库 > css3整理(四)

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整理(四)