响应式布局 简要学习笔记

关键词 ： “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 可用参数