CSS主流布局进阶与实战 - 9. 响应式布局 - 《前端漫步》

媒体查询语法详解
响应式栅格系统
响应式交互实现
实践： Ghost Blog

媒体查询语法详解

媒体类型

all 所有设备
print 打印预览模式
screen 屏幕
speech 语音合成器
```
@media screen, print { ... }
```

媒体特征

宽度 min-width/max-width

@media (min-width: 700px) {
  ...
}

横竖屏
orientation: portrait/landscape

@media (orientation: portrait) {
  ...
}
@media (orientation: landscape) {
  ...
}

逻辑操作符

and / not / 逗号

@media screen and (min-width: 700px ) and ( max-width: 1200px ) {
   ...
}

link标签

<link rel="stylesheet" href="./a.css" media="(orientation: portrait)" />
<link rel="stylesheet" href="./b.css" media="(orientation: landscape)" />

媒体查询编写位置及顺序

添加到样式表的底部，对CSS进行优先级覆盖
移动端 -> PC端适配原则： min-width从小到大
PC端 -> 移动端的适配原则： max-width从大到小

响应断点(阈值)设定

Extra small < 576px
Small >= 576px, -sm
Medium >= 768px, -md
Large >= 992px, -lg
X-Large >= 1200px, -xl
XX-Large >= 1400px, -xxl

响应式栅格系统

栅格布局 + 断点设定，使根据屏幕宽度不同显示的列数也不同

预览链接

响应式交互实现

用:checked伪类实现点击菜单显示或隐藏


<style>
  input:checked+ul {
    display: block;
  }
  ul {
    display: none;
  }
  input {
    display: none;
  }
</style>
<body>
  <label for="menu">
    <span>菜单</span>
  </label>
  <input type="checkbox" id="menu">
  <ul>
    <li>首页</li>
    <li>精华</li>
    <li>促销</li>
    <li>广告</li>
  </ul>
</body>

实践： Ghost Blog

点击查看【codepen】