響應式佈局 簡要學習筆記

關鍵詞 ： 「media query」

簡單格式/語法：@media screen{ [css..] }

當瀏覽器的可視區域小於400px：

@media screen and ( max-width:400px ) {...}

當瀏覽器的可視區域大於500px：

@media screen and ( min-width:500px ) {...}

meta viewport 在移動設備上設置原始大小顯示和是否縮放

<meta name=「viewport」 content=「width=device-width; initial-scale=1.0」>
或
emmet/Zencoding 快捷： meta:vp

---

進階
語法結構及用法

@media 設備名 only （選取條件） not （選取條件） and（設備選取條件），設備二{sRules}

 1 在link中使用@media
 2 在CSS中內嵌@media
 3 可用設備名
 4 邏輯關鍵字
 5 可用參數