媒体查询是实现页面响应式的一种样式定义机制，有了这种机制，我们可以针对不同尺寸的屏幕，给出不同的样式效果，从而让页面能够兼容多种不同的屏幕尺寸。
/* 针对三种不同的屏幕，给出不同的字体大小 | 768-991尺寸 字体大小 20px | 480-767尺寸 字体大小 18px | 小于 480尺寸 字体大小 16px */
/*在768 和991 像素之间的屏幕里，小屏幕，主要是PAD*/
@media (min-width: 768px) and (max-width: 991px) {
* {font-size: 20px;}
}
/*在480 和767 像素之间的屏幕里，超小屏幕，主要是手机*/
@media (min-width: 480px) and (max-width: 767px) {
* {font-size: 18px;}
}
/*在小于480 像素的屏幕，微小屏幕，更低分辨率的手机*/
@media (max-width: 479px) {
* {font-size: 16px;}
}| 扩展阅读 | |
|---|---|
| CSS3 viewport | 8/10/2018, 3:47:26 PM |
| 响应式？自适应？是什么！ | 8/10/2018, 3:47:09 PM |