媒体查询 min max - CSS

在响应式网站设计中，媒体查询是至关重要的技术。CSS的媒体查询允许您针对特定设备和屏幕尺寸应用不同的CSS规则。

媒体查询简介

媒体查询是CSS3中的一个模块，它定义了一种语法，允许开发人员在编写CSS样式表时为特定的媒体类型、媒体功能和设备类型应用CSS规则。

媒体查询也允许您检测屏幕尺寸并根据需要加载不同的CSS样式。这是响应式设计开发的一个核心方面。

min和max关键字

min和max是两个常用的关键字，它们用于比较屏幕宽度或高度和指定的数字。

min-width和max-width通常在响应式网站设计中使用。例如，如果您想为大于某个宽度的屏幕应用一些CSS规则，则可以使用min-width。反之，如果您想为小于某个宽度的屏幕应用一些其他规则，则可以使用max-width。

@media screen and (min-width: 768px) {
  /* 样式 rules 应用于所有大于等于 768 像素宽度的 dispaly */
}

@media screen and (max-width: 767px) {
  /* 样式 rules 应用于所有小于 767 像素宽度的 dispaly */
}

示例

以下是一个简单的示例，可以根据不同的屏幕尺寸调整标题的颜色。

/* 大于等于 768px 的屏幕 */
@media screen and (min-width: 768px) {
  h1 {
    color: blue;
  }
}

/* 小于 768px 的屏幕 */
@media screen and (max-width: 767px) {
  h1 {
    color: red;
  }
}

结语

媒体查询是响应式设计开发的核心技术。通过使用min和max关键字，您可以为不同的屏幕尺寸和设备类型应用不同的CSS规则，从而提供出色的用户体验。