移動Web開發必備基礎之媒體查詢

-Advertisement-

媒體類型： all （預設值） screen print 列印設備 speech 屏幕閱讀器由於all是預設值可不寫，因此以下兩種寫法效果相同 @media all and (min-width:900px){ } @media (min-width:900px){ } 媒體查詢中的邏輯與或 ...

媒體類型：

all （預設值）

screen

print 列印設備

speech 屏幕閱讀器

由於all是預設值可不寫，因此以下兩種寫法效果相同

@media all and (min-width:900px){

}


@media (min-width:900px){

}

媒體查詢中的邏輯

與或非

@media (min-width:900px) and (max-width:1024px){

}

媒體特征表達式

width / max-width / min-witdh

-webkit-device-pixel-ratio / -webkit-max-device-pixel-ratio / -webkit-min-device-pixel-ratio

orientation: landscape / portrait 橫屏 / 豎屏

媒體查詢-策略

移動端斷點（參考bootstrap）

xs <576px 1

sm 576~768px 2

md 768~992px 4

lg 992~1200px 6

xl >1200px 12

後面的條件滿足時，會覆蓋前面的條件

PC first

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        *{margin:0;padding:0;box-sizing:border-box;}
        img{width:100%;}
        .row{width:100%;display: flex;flex-wrap:wrap;}

        /*pc first*/
        .col{width:8.33%;}
        @media (max-width:1200px){
            .col{width:16.67%;}
        }
        @media (max-width:992px){
            .col{width:25%;}
        }
        @media (max-width:768px){
            .col{width:50%;}
        }
        @media (max-width:576px){
            .col{width:100%;}
        }

    </style>
</head>
<body>
    <div class="row">
        <div class="col">
            <img src="img/cyy.jpg">
        </div>
        <div class="col">
            <img src="img/cyy.jpg">
        </div>
        <div class="col">
            <img src="img/cyy.jpg">
        </div>
        <div class="col">
            <img src="img/cyy.jpg">
        </div>
        <div class="col">
            <img src="img/cyy.jpg">
        </div>
        <div class="col">
            <img src="img/cyy.jpg">
        </div>
        <div class="col">
            <img src="img/cyy.jpg">
        </div>
        <div class="col">
            <img src="img/cyy.jpg">
        </div>
        <div class="col">
            <img src="img/cyy.jpg">
        </div>
        <div class="col">
            <img src="img/cyy.jpg">
        </div>
        <div class="col">
            <img src="img/cyy.jpg">
        </div>
        <div class="col">
            <img src="img/cyy.jpg">
        </div>
    </div>
</body>
</html>

mobile first

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        *{margin:0;padding:0;box-sizing:border-box;}
        img{width:100%;}
        .row{width:100%;display: flex;flex-wrap:wrap;}

        /*mobile first*/
        .col{width:100%;}
        @media (min-width:576px){
            .col{width:50%;}
        }
        @media (min-width:768px){
            .col{width:25%;}
        }
        @media (min-width:992px){
            .col{width:16.67%;}
        }
        @media (min-width:1200px){
            .col{width:8.33%;}
        }

    </style>
</head>
<body>
    <div class="row">
        <div class="col">
            <img src="img/cyy.jpg">
        </div>
        <div class="col">
            <img src="img/cyy.jpg">
        </div>
        <div class="col">
            <img src="img/cyy.jpg">
        </div>
        <div class="col">
            <img src="img/cyy.jpg">
        </div>
        <div class="col">
            <img src="img/cyy.jpg">
        </div>
        <div class="col">
            <img src="img/cyy.jpg">
        </div>
        <div class="col">
            <img src="img/cyy.jpg">
        </div>
        <div class="col">
            <img src="img/cyy.jpg">
        </div>
        <div class="col">
            <img src="img/cyy.jpg">
        </div>
        <div class="col">
            <img src="img/cyy.jpg">
        </div>
        <div class="col">
            <img src="img/cyy.jpg">
        </div>
        <div class="col">
            <img src="img/cyy.jpg">
        </div>
    </div>
</body>
</html>

效果同上

一般建議mobile first （移動優先）

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

Android 相機開發中的尺寸和方向問題

在 Android Camera 開發中，兩個比較鬧心的問題就是尺寸和方向了。其中尺寸指的是：相機顯示預覽幀的尺寸相機拍攝幀的尺寸 Android 顯示相機預覽內容的控制項尺寸而方向指的是相機顯示預覽幀的方向相機拍攝幀的方向 Android 手機自身的方向在開發中要處理好這三個方向和三個 ...
阿裡、位元組：一套高效的iOS面試題

簡述筆者最近收集梳理了一些iOS相關的問題，其中大部分都是大廠面試或者面試其他人用到的，能命中大部分的面試和日常工作，更希望你可以用它來檢驗自己由於問題量太大，本文只是給了問題，希望發揮圈友的動手能力，自己去探索下，也可以在下方進行評論回覆你的答案或者提出更高質量的問題！！！ runtime相關 ...
高性能的小程式swiper組件

小程式的社區總是覺得只有幾個活躍的人，問一些問題的時候很難得到想要的答案，做過超過100個swipe-item的同學可能會發現低端機型會卡頓，使用小程式提供的組件滿足不了業務的需求，多個swipe-item的使用場景是很多的，例如刷題，刷商品，刷視頻等，刷商品swipe-item可能有上千個，這次的 ...
javascript實戰演練,製作新按鈕,‘新視窗打開網站’,點擊打開新窗

通過練習javascript中的document.write()輸出展示；消息彈出框alert(字元串或變數)；消息對話框confirm(str)；用戶交互的信息prompt(str1, str2)；打開新視窗window.open([URL], [視窗名稱], [參數字元串])；window.cl... ...
JavaScript中window.open()打開與window.close()關閉

在JavaScript中window.open([URL], [視窗名稱], [參數字元串])打開新的視窗，使用window.close();//關閉本視窗或者是<視窗對象>.close();//關閉指定的視窗，舉例var ceshi=window.open('https://www.cnblogs... ...
JavaScript-打開新視窗（window.open）

通過window.open() 設置瀏覽器視窗；具體語法為window.open([URL], [視窗名稱], [參數字元串])；其中視窗名稱：可選參數，被打開視窗的名稱裡面的"_top"、"_blank"、"_self"具有特殊意義的名稱；參數字元串：可選參數，設置視窗參數，各參數用逗號隔開,引號... ...
移動端常用單位（%和rem）

px % em （ font-size的值就是 1em，如果自身沒有設置font-size，則去找父元素的；常用於 text-indent:2em 來縮進兩個字元） rem（html的font-size的大小，就是1rem ；rem是相對於根元素<html>，即rem繼承的是html的font-s ...
CSS中使用animation-timing-function：steps(num，start/end)實現逐幀動畫

用animation做動畫時發現背景圖片是直接平移運動到指定位置的，即具有連續性，而animation-timing-function：steps(num，start/end)屬性可以使背景圖片運動不連續，即實現逐幀動畫。 steps(num，start/end) 第一個值num表示把動畫分成了多少 ...