一、认识：media
从 CSS2.1 那会，样式表就可以使用 media type 进行样式的判断了。那时是这么写的：
如果当前 media 是浏览器，则加载 core.css。
如果当前 media 是打印机，则加载 print.css。
感谢 W3C 在 CSS3 中对 media 进行了扩展：可以在 media 中增加条件。
例如：
或：
@import url("shetland.css") screen and (max-device-width: 480px);
解释：
当 media 为 screen（浏览器，平板电脑，手机），且宽度小于 480px 时，加载 shetland.css
当然，
它还可以将颗粒度细化到符合哪些条件，则应用那个样式类：
@media screen and (max-device-width: 480px) {
.column {
float: none;
}
}
例子一：
调整浏览器的宽度，观察效果！
当且仅当：media 类型为 screen（浏览器，平板，手机），
且 viewport 的宽度大于等于 480px 时，media query 中的样式才会起作用。
例子2:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_mediaquery
The Pulpit Rock
The Walk
The walk to the Pulpit Rock will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.
What?
The Pulpit Rock is a part of a mountain that looks like a pulpit.
Where?
The Pulpit Rock is in Norway
Price?
The walk is free!
应用：
http://lixh1986.iteye.com/blog/2321482
引用请注明，
原文出处：http://lixh1986.iteye.com/blog/2376864
参考：
https://alistapart.com/article/responsive-web-design
-
- 查看图片附件