CSS - 响应式布局 - @media 媒体查询

1. 基本概念

Media Queries（媒体查询）是 CSS3 中引入的一种技术，用于根据不同的设备特性（如屏幕尺寸、设备类型、分辨率等）来应用不同的 CSS 样式。语法结构：

@media [not] [媒体类型] [逻辑操作符] [媒体特性] {
	...
}

@media [not] [all/screen/print] [and/or(,)] [width/min-width/max-width/height/min-height/max-height/device-pixel-ratio/min-device-pixel-ratio/max-device-pixel-ratio/landscape/portrait] {
	...
}

2. 常见媒体类型（Media Types）

all：适用于所有设备类型，是默认值。
screen：主要用于屏幕设备，如桌面显示器、笔记本电脑屏幕、平板电脑屏幕、智能手机屏幕等。
print：用于打印预览和打印页面。可以在这个媒体类型下定义专门用于打印的样式。

3. 媒体特性（Media Features）

宽度相关特性：width、min-width、max-width
高度相关特性：height、min-height、max-height
设备像素比相关特性：device-pixel-ratio、min-device-pixel-ratio、 max-device-pixel-ratio
设备方向相关特性：orientation：landscape(横向) / portrait(纵向)

@media all and (min-width: 768px) {
    /* 适用于所有设备，当最小宽度为768px时应用样式 */
}

@media print {
/* 隐藏不需要打印的元素（如导航栏、广告等），调整字体大小和颜色以适应打印效果等*/
	nav, footer {
    	display: none;
    }
    body {
    	font-size: 12pt;
        color: black;
    }
}

@media (min-width: 1024px) {
	/* 当视口宽度大于等于1024px时应用样式 */
}
@media (max-width: 767px) {
	/* 当视口宽度小于等于767px时应用样式 */
}

@media (min-height: 800px) {
	/* 当视口高度大于等于800px时应用样式 */
}

@media (min-device-pixel-ratio: 2) {
	/* 当设备像素比大于等于2时应用样式，如提供高清图像 */
}

@media screen and (orientation: landscape) {
	/* 当屏幕为横向时应用样式 */
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	/* 当设备是屏幕设备，且宽度在768px到1024px之间时应用样式 */
}

@media screen and (min-width: 1200px), print {
	/* 当设备是屏幕设备且宽度大于等于1200px，或者是打印设备时应用样式 */
}

@media not screen and (max-width: 480px) {
	/* not操作符只能应用于整个媒体查询，不能用于否定单个媒体特性 */
	/* 当设备不是屏幕设备或者屏幕宽度大于480px时应用样式 */
}

4. Bootstrap breakpoints：

xs: {max: 575},
sm: {min: 576, max: 767},
md: {min: 768, max: 991},
lg: {min: 992, max: 1199},
xl: {min: 1200}

在 Bootstrap 框架中，@include media-breakpoint-xxx是一个 Sass(SCSS)混合器(mixin)，用于生成基于 Bootstrap 断点的媒体查询:
@include media-breakpoint-between(xs, xl): all size
@include media-breakpoint-down(md): <= md.max
@include media-breakpoint-up(lg): >= lg.min

@import "~bootstrap/scss/bootstrap";
p {
	@include media-breakpoint-between(sm, lg) {
		color: #007bff;
		background - color: #f8f9fa;
	}
}