一、响应式布局（媒体查询）

什么是媒体查询 @media ？

• 概念：为不同尺寸的屏幕设定不同的CSS样式
• 示例：

@media screen and (min-device-width:100px) and (max-device-width:300px) {
  #div0 {...}
}
@media screen and (min-device-width:301px) and (max-device-width:500px) {
  #div0 {...}
}

@media 常用参数

属性名称	作用
width、height	浏览器可视宽度、高度
device-width、device-height	设备屏幕宽度、高度

• 因为高度会有滚动条，一般都处理宽度。

@media 的引入方式

内部样式表

<style media="(min-device-width:100px) and (max-device-width:300px)">
  #div0 {...}
</style>

外部样式表

<link rel="stylesheet" href="style.css" media="(min-device-width:100px) and (max-device-width:300px)">