在 CSS3 中，引入 Responsive Web Design 特性：对于使用 @media 包裹的 CSS 属性，仅当某些条件得到满足时这些 CSS 属性才会生效。我们也需要使用该特性，来针对不同的屏幕尺寸使用不同的 CSS 属性。该笔记将记录：在 CSS 中，如何使用 @media 来编写 CSS 属性，以及相关问题出来。
简单示例
https://www.w3schools.com/cssref/atrule_media.php
如下 CSS 代码，仅在浏览器窗口在 600px 以下时，背景色设置才生效：
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
屏幕尺寸的分界线
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
参考文献
Responsive Web Design Media Queries
css – Media Queries: How to target desktop, tablet, and mobile? – Stack Overflow