RWD響應設計--要點介紹
viewport ： 在head裡面設定viewport，讓字體不會隨著裝置而改變大小。 html： width=device-width：寬度隨裝置而改變 initial-scale：初始狀態是一倍 user-scalable=1：0為不能拖拉；1為可以拖拉 maximum-scale=1.5：最大拖拉大小為1.5倍 minimum-scale=1.5：最小拖拉大小為1.5倍 media-query： 在樣式表（ css ）中於不同裝置尺寸中，設定不同的格線寬度。 當物件到達某個裝置大小時，內容物會隨之改變大小或者換行。 Queries 有四種使用方式，分別是 or 、 and 、 not 和 only ，除了 or 使用逗號「,」表現，其他的就直接寫出英文字。 OR 例子如下：螢幕尺寸大於等於 400px 「或」裝置橫放時，字體會變成藍色 50px，反之就是黑色 30px。 h1{ font-size:30px; } @media (min-width:400px), (orientation: portrait){ h1{ font-size:50px; color:red; } } And 使用 AND 必須要所有條件皆滿足，例子如下 h1{ font-size:30px; } @media screen and (min-width:400px) and (max-width:600px){ h1{ font-size:50px; color:blue; } } Only ONLY 可以指定「只有」某種裝置媒體才能套用某些樣式，會寫在 media query 的字首， 目前這種撰寫方式越來越少見，最主要是因為使用舊版裝置媒體的人越來越少，因此直接採用 AND 或 OR 的寫法就能夠符合絕大多數的需求。 NOT NOT 的目的在於排除一些裝置媒體，會寫在 media query 的字首，。 ＊NOT 和 O...