CSS3 媒體查詢響應式布局

標籤：style   ar   使用   strong   on   問題   代碼   html   amp   

在這個以手機、平板和電腦為中心的互連網時代。為了提高使用者體驗度，讓頁面適應不同螢幕的解析度成了我們寫頁面時最至關重要的問題。CSS3中的媒體查詢功能很好的幫我們解決了這一問題，它可以根據螢幕的大小進行上擴和下擴呈現給使用者一個可用的介面。

　　剛開始接觸媒體查詢這個功能，我一邊感慨它的強大，一邊焦慮著我應該怎麼去用它呢？首先我們得對它進行一個詳細的認識和瞭解。

　　媒體查詢就是通過不同的媒體類型和條件定義樣式表的規則。可以讓CSS更精確的作用於不同的媒體類型和同一媒體的不同條件。媒體查詢的大部分媒體特性都接受min和max用於表達“大於或等於”和“小與或等於”。如：width會有min-width和max-width。媒體查詢可以被用在CSS中的@media和@import規則上，也可以被用在HTML和XML中。目前Google Chrome、Safari 3、Firefox 3.5、Opera 7以及Internet Explorer 9都支援媒體查詢。同時我們也得滿足舊版本瀏覽器的需求，只要我們的主式樣表是在沒有使用媒體查詢的情形下提供的，那麼該頁面就能夠在所有的瀏覽器中進行式樣設計。

　　媒體查詢範例程式碼：
　　@media screen and (width:800px){ … }
　　@media screen (max-width:800px) and (min-width:800px){ … }
　　@import url(example.css) screen and (width:800px);
　　<link media="screen and (width:800px)" rel="stylesheet" href="example.css" />
　　<?xml-stylesheet media="screen and (width:800px)" rel="stylesheet" href="example.css" ?>

　　使用過程中我們可以根據手機、平板以及電腦螢幕的大中小解析度定義3個樣式的設定或改調，達到更高的使用者體驗。以上是我對媒體查詢的一些拙見，歡迎各位大神錯誤修正提點。

CSS3 媒體查詢響應式布局