基础 CSS 默认媒体查询

在现代前端开发中，为了适应不同的设备和屏幕大小，我们经常会使用媒体查询（Media Query）。媒体查询是CSS的一个非常重要的特性，它允许我们根据设备的特征（如屏幕大小、屏幕方向、分辨率、颜色等）来调整CSS样式。默认的CSS媒体查询旨在提供最基本的响应式设计支持。

媒体查询语法

媒体查询的语法如下：

@media mediatype and (expressions) { ... }

其中， mediatype 可以是 all、screen、print 等，而 expressions 则是媒体特性和值的列表。通过媒体查询，我们可以根据不同的媒体特性设置不同的样式。

例如，以下代码会在设备宽度小于600px的情况下，将h1元素的字体颜色改为红色：

@media screen and (max-width: 600px) {
  h1 {
    color: red;
  }
}

默认媒体查询

CSS的默认媒体查询是在CSS规范中定义的，用于提供基本的响应式设计支持。默认媒体查询包含四个媒体特性：width、height、device-width 和 device-height。

1. width

width 特性用于设置viewport的宽度。例如，以下代码将在viewport宽度小于等于500px时，改变body元素的背景色：

@media (max-width: 500px) {
  body {
    background-color: yellow;
  }
}

2. height

height 特性用于设置viewport的高度。例如，以下代码将在viewport高度小于等于600px时，改变body元素的背景色：

@media (max-height: 600px) {
  body {
    background-color: pink;
  }
}

3. device-width

device-width 特性用于设置设备屏幕的宽度。例如，以下代码将在设备屏幕宽度小于等于600px时，改变body元素的背景色：

@media (max-device-width: 600px) {
  body {
    background-color: green;
  }
}

4. device-height

device-height 特性用于设置设备屏幕的高度。例如，以下代码将在设备屏幕高度小于等于800px时，改变body元素的背景色：

@media (max-device-height: 800px) {
  body {
    background-color: blue;
  }
}

总结

默认的CSS媒体查询是响应式设计的基础。我们可以通过设置不同的媒体特性和值来适应不同大小的设备和屏幕。在实际开发中，我们应该根据具体项目的需求，选择合适的媒体查询来构建自己的响应式网站。