響應式設計-媒體查詢

標籤：style   http   color   io   使用   ar   strong   檔案   sp   

媒體查詢

媒體查詢只支援IE9+、chrome、ff等瀏覽器，IE8以下的瀏覽器可以下載引用respond.js，

寫法：

<!--[if lt IE 9]>
　　　　<script src="respond.js"></script>
<![endif]-->

媒體查詢能檢測哪些屬性 ：
    1.width  視口寬度
    2.height 視口高度
    3.device-width 渲染表面的寬度（對我們來說就是裝置螢幕的寬度）
    4.device-height   渲染表面的高度（對我們來說就是裝置螢幕的高度）
    5.orientation  檢查裝置處於橫向還是縱向
    6.aspect-ration 基於視口寬度和高度的寬高比
        一個16:9比例的顯示屏可以這樣定義：aspect-ration:16/9;
    7.device-aspect-ration 基於裝置渲染平面的寬高比
    8.color 每種顏色的位元  例如 min-color:16 會檢查裝置是否擁有16位顏色
    9.color-index 裝置色彩索引表中的顏色數。值必須是非負整數
    10.monochrome 檢查單色框架緩衝區中每像素所使用的位元 ， 值必須是非負整數
    11.resolution 用來檢測螢幕或印表機的解析度，例如：min-resolution:300dpi,
        還可以接受每厘米像素點數的度量值，例如，min-resolution:118dpcm;
    12.scan 電視機的掃描方式
        progressive 漸進式掃描
        interlace 隔行掃描
        例如：720p HD電視（p表示漸進式掃描）匹配 scan:progressive
        1080i HD電視（i表示隔行掃描）匹配 scan:interlace
    13.grid 用來檢測輸出裝置是網路裝置還是位元影像裝置

    1-11可以有min- 、max- 建立一個查詢範圍，而12-13沒有

寫法：

　　1、link上面media屬性判斷，是否載入改css

　　eg：<link rel="stylesheet" type="text/css" media="screen and orientation:portrait" href="css/sreen_style.css" />

        　　orientation:portrait 意思是顯示屏是縱放的，yes，載入改css
        　　not 在媒體查詢的開頭加上會顛倒改查詢的邏輯
        　　and 是並||
        　　， 或
　　2、css檔案外鏈css檔案

　　　　　@import url("phone.css") screen and (max-width:360px); /*當顯示屏最大寬度小於360px時載入  */
　　3、直接書寫：

　　　　@media screen and (max-width:980px) {
   　　　　　　body{
       　　　　　　background:#f0f;
      　　　　 　　font-size:12px;
   　　　　　　}
　　　　　}

 

響應式設計-媒體查詢