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整理（四）