響應式設計——媒體查詢

時間 2020-05-21

標籤響應設計媒體查詢简体版

原文原文鏈接

1、響應式設計javascript

　　響應式設計的概念是頁面的設計應根據用戶的行爲（如調整瀏覽器窗口大小）和設備環境（如屏幕大小、屏幕定向）進行相應的調整。它能夠由多方面組成，包括彈性網格和佈局、彈性圖片、媒體查詢等。css

2、媒體查詢html

2.1媒體查詢的概念java

在css2中容許使用media來對特定的媒體應用特定的樣式，例如針對屏幕或者打印機。能夠經過<link>標籤的media屬性爲樣式表指定特定的媒體。css3

<link rel="stylesheet" type="text/css" href="screen-style.css" media="screen" />

可是這種方式只能針對媒體的類型，不能根據媒體的各類功能特性來設定相應的樣式，而css3中的媒體查詢則能夠。git

　　媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達式組成。媒體查詢中可用於檢測的媒體特性有 width和height 等。使用媒體查詢，能夠在不改變　　　　　頁面頁面內容的狀況下，爲特定的一些輸出設備定製顯示效果。github

　 2.2媒體查詢的語言chrome

　　　1.在css樣式表中使用@media瀏覽器

　@media screen and (max-width:800px){ 　　　　　　body{ 　　　　　　　　background-color:red;
　　　　　　} 　　　　}

①其中screen是媒體類型的一種(屏幕)，其餘的媒體類型以下ide

媒體類型	媒體類型說明
all	全部媒體
aural	聽覺媒體
braille	點字觸覺媒體
handled	便攜媒體，如手機、平板電腦
print	打印預覽圖等
projection	投影設備
screen	顯示器、筆記本、移動端等設備
tty	如打字機或終端等設備
tv	電視機等設備類型
embossed	盲文打印機

②其中and是關鍵字，用於鏈接多個並列條件，其餘關鍵字還有not和only。not是指排除某種設備，除了指定的這種設備以外，其餘的均可以。如：

@media not screen{ body{ color:red;
       } }

　　是指不是顯示屏以外的應用此樣式。

　　 only是對於不支持Media Queries可是可以正確讀取Media Type的設備隱藏樣式表。Media Queries是css3對Media Type的一個擴展，因此不支持Media Queries的瀏覽器，應該仍然要識別Media Type。好比：

@media only screen and (max-width:990px){ body{ color:red;  
      } }

　　對於支持Media Queries的設備，可以正確應用樣式，就像only不存在同樣；對於不支持Media Queries可是可以正確讀取Media Type的設備，因爲先讀取到only而不是screen，因此會忽略這個樣式；不支持media Queries的IE不管是否有only，都忽略樣式。下面是Media Queries的支持狀況：

IE6	不支持
IE7	不支持
IE8	不支持
IE9+	支持
chrome5	支持
Opera10	支持
Firefox3.6	支持
Safari4	支持

逗號（,）用來表示並列，即或者。好比：

@media handheld and (max-width:20em),screen and (max-width:30em){ body{ color:red;
    } }

這個表示在寬度小於20em的手持設備，或者寬度小於30em的屏幕中應用此樣式。

③其中對於(max-width:800px)就是媒體特性，被置放在一對圓括號裏面。媒體特性只接受單個的邏輯表達式做爲其值，或者沒有值。其中大部分接受max/min的做爲前綴。下表是一些媒體特性：

媒體特性	取值	含義	支持 max/min
width	length	視口寬度	支持
height	length	視口高度	支持
device-width	length	設備屏幕的寬度	支持
device-height	length	設備屏幕的高度	支持
orientation	portrait\| landscape	檢查設備處於橫向仍是縱向	不支持
aspect-ratio	ratio(16/9)	基於視口寬度和高度的寬高比	支持
device-aspect-ratio	ratio(16/9)	基於設備寬度和高度的寬高比	支持
color	integer	每種顏色的位數	支持
color-index	integer	設備的顏色索引表中的顏色數	支持
monochrome	integer	檢查單色幀緩衝區中每像素所使用的位數	支持
resolution	resolution(300pdi/118dpcm)	用來檢測屏幕或打印機的分辨率	支持
scan	progressive/ interlace	電視機的掃描方式	不支持
grid	interger	用來檢測輸出設備是網格設備仍是位圖設備	不支持

2.經過<link>標籤的media屬性爲樣式表指定特定的媒體查詢

<link rel="stylesheet" media="screen and (orientation:portrait)" href="screen.css" />

2.3媒體查詢的兼容

IE8及其如下的瀏覽器不支持css3 Media Queries，而目前實現media queries兼容的庫比較成熟的有respond.js 和 css3-mediaqueries-js，它們各有優缺點，respond.js壓縮後只有1K，只實現了Media Queries中最經常使用的min-width/max-width的兼容；css3-mediaqueries-js基本實現了全部css3規範中的media query特性的兼容，因此致使壓縮有16k。

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

或者

<!--[if lt IE 9]> <script type="text/javascript" src="css3-mediaqueries-js.js"></script> <![endif]-->

2.4媒體查詢的小案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>CSS3 Media Queries</title>
        <style type="text/css"> .box{ width:800px; height:50px; line-height: 50px; margin:40px auto; border:1px solid #000;
            } @media only screen and (max-width:1300px){ #boxred{ background:red;
                } #boxblue,#boxgreen{ background:none;
                } } @media only screen and (max-width:1100px){ #boxblue{ background:blue;
                } #boxred,#boxgreen{ background:none;
                } } @media only screen and (max-width:900px){ #boxgreen{ background:green;
                } #boxred,#boxblue{ background:none;
                } } </style>
    </head>
    <body>
        <div id="boxred" class="box">當瀏覽器窗口寬度小於1300px時，這兒變成紅色</div>
        <div id="boxblue" class="box">當瀏覽器窗口寬度小於1100px時，這兒變成藍色</div>
        <div id="boxgreen" class="box">當瀏覽器窗口寬度小於900px時，這兒變成綠色</div>
    </body>
</html>