CSS 媒体查询（Media Queries）及断点设置

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；优快云知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

No.	大剑师精品GIS教程推荐
0	地图渲染基础- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】
1	Openlayers 【入门教程】 - 【源代码+示例 300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	MapboxGL【入门教程】 - 【源代码+图文示例150+】
4	Cesium 【入门教程】 - 【源代码+综合教程 200+】
5	threejs【中文API】 - 【源代码+图文示例200+】
6	Shader 编程 【图文示例 100+】
7	Geoserver 【配置教程 100+】
8	卫星应用开发教程 【配置+应用教程 100+】
9	GIS数字孪生与大模型 【应用实战 100+】
10	报表与数字大屏 【Echarts 实战示例】 - 【D3 综合教程】 - 【其他大屏】

---

媒体查询（Media Queries）是CSS3引入的一项功能，允许内容呈现针对不同的设备环境和屏幕尺寸做出相应的响应。通过媒体查询，开发者可以根据设备的特性（如视口宽度、高度、设备像素比、色彩能力等）应用不同的CSS样式。

一、媒体查询的基本结构

@media media-type and (media-feature) {
  /* 在满足特定条件时应用的CSS样式 */
}

其中：

• media-type 是媒体类型，如 screen（适用于电脑显示器、平板和智能手机等）、print（适用于打印预览）等。
• media-feature 是媒体特性表达式，比如 min-width、max-width、orientation 等，用来描述设备的具体特征。

二、断点设置

断点是设计师和开发者在创建响应式布局时设置的关键屏幕尺寸，当屏幕尺寸达到或超过（或低于）这些特定的宽度时，布局会发生变化。例如：

/* 当屏幕宽度小于等于600px时 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

/* 当屏幕宽度大于600px且小于等于900px时 */
@media screen and (min-width: 601px) and (max-width: 900px) {
  body {
    background-color: lightgreen;
  }
}

/* 当屏幕宽度大于900px时 */
@media screen and (min-width: 901px) {
  body {
    background-color: lightyellow;
  }
}

在上述例子中，三个断点分别定义了小于等于600px、介于601px至900px之间、以及大于900px的屏幕宽度下的样式变化。

断点的选择并不是固定的，应当根据项目需求和目标设备的特性来设定。通常，响应式设计会考虑到移动端、平板、桌面等多种屏幕尺寸，常见的断点可能会围绕着手机横竖屏切换点（如320px-480px）、平板横向视窗（如768px左右）以及桌面宽屏视窗（如1024px、1200px及以上）来设定。