如何正确使用CSS媒体查询

发布时间：2023-05-12

CSS媒体查询使用指南

CSS媒体查询是一种非常有用的技术，可以让我们根据不同的设备和屏幕宽度来为网站做不同的排版和布局，提高用户体验。在本文中，我们将深入探讨如何正确使用CSS媒体查询，让你在实际开发中能够更好地运用这一特性。

一、什么是CSS媒体查询

CSS媒体查询是CSS3中的一项特性，它可以根据不同的设备和媒体类型来为网页提供不同的样式。比如，在PC上页面的宽度通常比较宽，我们可以对文字大小、行高、宽度等做一些优化；而在移动设备上，页面宽度比较狭小，我们可以将排版调整得更紧凑一些。 举个例子，如果我们想为屏幕宽度小于等于768px的设备提供不同的样式，可以这样写：

@media screen and (max-width: 768px) {
  /* 这里就是我们要写的样式 */
}

其中，screen表示媒体类型为屏幕，max-width表示屏幕宽度小于等于768px。这样，我们就可以为设备提供适配的样式。

二、CSS媒体查询的语法

CSS媒体查询的语法非常简单，如下：

@media 媒体类型 and (媒体属性) {
  /* 样式代码 */
}

其中，媒体类型可以是all（所有设备）、print（打印设备）、screen（计算机屏幕）等等；媒体属性可以包含屏幕宽度、屏幕高度、设备宽度、设备高度等属性。 代码示例：

/* 使用媒体查询根据设备宽度设置段落的字号 */
@media screen and (max-width: 768px) {
  p {
    font-size: 16px;
  }
}
@media screen and (min-width: 768px) {
  p {
    font-size: 18px;
  }
}

上面的代码中，我们使用了媒体查询设置了设备宽度为768px以下和768px以上两种情况下段落的字号分别为16px和18px。

三、CSS媒体查询的应用场景

CSS媒体查询可以广泛应用于很多场景中，比如：

1、响应式设计

在响应式设计中，我们会根据设备宽度来改变网页的布局和排版方式，让网页在不同设备上都能展现最佳的视觉效果。CSS媒体查询是响应式设计的基础。

2、定制化的打印样式

我们可以使用CSS媒体查询来为打印设备提供定制化的样式。比如，可以将网页的背景色改为白色，去掉一些在打印时不必要的元素等。

3、移动端和桌面端的差异化样式

在移动端和桌面端上，页面的宽度和排版方式有很大的不同。我们可以使用CSS媒体查询为它们提供不同的样式。

四、常用的媒体查询

下面提供一些常用的媒体查询供参考。

1、针对不同设备分辨率设置不同的字号

/* iPhone 4、4S 的屏幕宽度为320像素 */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  body {
    font-size: 14px;
  }
}
/* iPhone 5、5S、5C 的屏幕宽度为320像素 */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
  body {
    font-size: 16px;
  }
}
/* iPhone 6、6S、7、8 的屏幕宽度为375像素 */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
  body {
    font-size: 18px;
  }
}
/* iPhone 6 Plus、6S Plus、7 Plus、8 Plus 的屏幕宽度为414像素 */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) {
  body {
    font-size: 20px;
  }
}
/* iPad 的屏幕宽度为768像素 */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  body {
    font-size: 22px;
  }
}
/* iPad Pro 的屏幕宽度为1024像素 */
@media only screen and (min-device-width: 1024px) {
  body {
    font-size: 24px;
  }
}

2、针对不同设备设置不同的背景图

/* iPhone4、4S 的屏幕宽度为320像素 */
@media screen and (min-device-width: 320px) and (max-device-width: 480px) {
  body {
    background-image: url("iphone4_bg.jpg");
  }
}
/* iPhone 5、5S、5C 的屏幕宽度为320像素 */
@media screen and (min-device-width: 320px) and (max-device-width: 568px) {
  body {
    background-image: url("iphone5_bg.jpg");
  }
}
/* iPhone 6、6S、7、8 的屏幕宽度为375像素 */
@media screen and (min-device-width: 375px) and (max-device-width: 667px) {
  body {
    background-image: url("iphone6_bg.jpg");
  }
}
/* iPhone 6 Plus、6S Plus、7 Plus、8 Plus 的屏幕宽度为414像素 */
@media screen and (min-device-width: 414px) and (max-device-width: 736px) {
  body {
    background-image: url("iphone6p_bg.jpg");
  }
}
/* iPad 的屏幕宽度为768像素 */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  body {
    background-image: url("ipad_bg.jpg");
  }
}
/* iPad Pro 的屏幕宽度为1024像素 */
@media screen and (min-device-width: 1024px) {
  body {
    background-image: url("ipadpro_bg.jpg");
  }
}

3、针对不同设备设置不同的列数

/* 宽度大于等于992像素时，在一行上显示三列 */
@media only screen and (min-width: 992px) {
  .container {
    width: 960px;
  }
  .col-sm-4 {
    float: left;
    width: 33.33333%;
  }
}
/* 宽度大于等于768像素时，在一行上显示两列 */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .container {
    width: 750px;
  }
  .col-md-6 {
    float: left;
    width: 50%;
  }
}
/* 宽度小于768像素时，每一列独自占据一行 */
@media only screen and (max-width: 767px) {
  .container {
    width: 100%;
  }
  .col-xs-12 {
    float: left;
    width: 100%;
  }
}

总结

CSS媒体查询是响应式设计中不可或缺的工具，通过它我们可以为不同设备设置不同的样式和布局。我们在项目开发中需要根据实际情况，选取不同的媒体查询，灵活运用。通过多次实践和总结，你会不断提升自己的媒体查询技巧。

推荐文章