IT工程師數位筆記本

“響應式設計（Responsive Design）”是一種讓網站針對不同的瀏覽器和設備“響應”不同顯示效果的策略，這樣可以讓網站在任何情況下顯示的很棒！

媒體查詢是做此事所需的最強大的工具。讓我們使用百分比寬度來布局，然后在瀏覽器變窄到無法容納側邊欄中的菜單時，把布局顯示成一列

媒體查詢使人們可以創造出一個能自適應的樣式，而不必用Javascript。

CSS2早已被廣泛支持，開發者可以在link標簽上設置不同的媒體查詢值，來為不同的多媒體設備提供不同的樣式表。

<link rel="stylesheet" media="screen" href="style.css">

<link rel="stylesheet" media="print" href="print-style.css">

CSS3提供了更強大的語法，讓你可以根據更多的條件過濾樣式表，而不是只能根據媒體查詢來過濾。

媒體查詢可以由一個布爾運算符開始。用not開始的話，會將字段最后解析出的結果取反。最常見的是用only開始，但舊的瀏覽器無法解析only操作符，就可以有效的在舊瀏覽器上屏蔽掉只應用于現代瀏覽器的應用表。

只有較窄的屏幕才可以使用該樣式表。

    <link rel="stylesheet" media="only screen and (max-width:480px)" href="style.css">

只有較寬的屏幕才可以使用該樣式表。

    <link rel="stylesheet" media="only screen and (min-width:2000px)" href="style.css">

媒體查詢真正的偉大之處在于，我們不僅能通過外部的媒體屬性使用它，還可以在樣式表內部中通過@media指令使用它 。

       @media only screen and (max-width:800px){

               /*css that applies only in this case*/

        }

Media所有參數：

width:瀏覽器可視寬度。 

height:瀏覽器可視高度。  

device-width:設備屏幕的寬度。

device-height:設備屏幕的高度。  

orientation:檢測設備目前處于橫向還是縱向狀態。  

aspect-ratio:檢測瀏覽器可視寬度和高度的比例。(例如：aspect-ratio:16/9)  

device-aspect-ratio:檢測設備的寬度和高度的比例。  

color:檢測顏色的位數。（例如：min-color:32就會檢測設備是否擁有32位顏色） 

color-index:檢查設備顏色索引表中的顏色，他的值不能是負數。  

monochrome:檢測單色楨緩沖區域中的每個像素的位數。（這個太高級，估計咱很少會用的到）  

resolution:檢測屏幕或打印機的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。  

grid：檢測輸出的設備是網格的還是位圖設備。