◎媒體查詢--viewport(視口)： 1.需要放在<head></head>中。 2.Width:可以將視口設置為某一特定寬度或裝置螢幕的寬度。 <meta name="viewport" content="width=device-width"/> 使用device-width可以讓頁面佈局等於裝置的螢幕寬度。讓手機擺脫需要"放大"頁面後才能看的情況。 最好不要指定絕對的數值，例如240px，那麼不是240px的裝置只能透過拉伸頁面來配合螢幕。 3.Height： <meta name="viewport" content="width=device-height"/> 不常用到，只有在不想讓頁面垂直滾動的時候才用到，但這種情形並不多見。 4.User-scalable：是否允許使用者縮放頁面。 <meta name="viewport" content="user-scalable=no"/> user-scalable=設置為no不僅違背Web本性，也所害了網站的可訪問性。如果不設定，預設值會是yes，所以最好還是清楚的設定一個值：yes或no。 5.inital-scale:初始化畫面的縮放大小。0.1(10%)~1(100%)~10.0(1000%) <meta name="viewport" content="inital-scale=1,width=device-width"/> 6.Maximum-scale：使用者可以放大頁面到什麼程度。0.1(10%)~1(100%)~10.0(1000%) 如果設定為1.0，代表禁止使用者放大，降低網站的可訪問性。Safari預設值是1.6(160%)。 7.Minimum-scale：使用者可以縮小頁面到什麼程度。0.1(10%)~1(100%)~10.0(1000%) 如果設定為1.0，代表禁止使用者縮小，降低網站的可訪問性。Safari預設值是0.25(25%)。 ◎媒體查詢語法： @media [not|only] type [and] (expr) { rules }包括4個基本組成部分： 1.媒體類型：特定的目標裝置。 2.媒體表達式：測試某一特性是否為真。 3.邏輯關鍵詞：可以使用關鍵詞(例如：and,or,not,only)建立更多複雜的表達式。 4.規則：調整顯示效果的語法。
