CSS Media Queries Demo

当前的可视宽度:< 600px 600~900px 之间 > 900px

改变浏览器窗口宽度,你将看到下面矩形背景色的变化:

可视宽度 < 600px
600px < 可视宽度 < 900px
900px < 可视宽度
设备分辨率宽度 = 480px (以iPhone为例)

(本Demo不支持IE6/7/8。)

CSS:

/* 可视宽度 < 600px */
@media screen and (max-width:600px) { ... }

/* 600px < 可视宽度 < 900px */
@media screen and (min-width:600px) and (max-width:900px) { ... }

/* 900px < 可视宽度 */
@media screen and (min-width:900px) { ... }

/* 设备分辨率宽度 = 480px (以iPhone为例) */
@media screen and (max-device-width:480px) { ... }

或 link CSS 文件:

<!-- 可视宽度 < 600px -->
<link rel="stylesheet" media="screen and (max-width:600px)" href="xxx.css">

<!-- 600px < 可视宽度 < 900px -->
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="xxx.css">

<!-- 900px < 可视宽度 -->
<link rel="stylesheet" media="screen and (min-width:900px)" href="xxx.css">

<!-- 设备分辨率宽度 = 480px (以iPhone为例) -->
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="xxx.css">