CSS媒体查询和响应式设计

如何在CSS中使用媒体查询来构建响应式网页

在这篇文章中,我将首先介绍媒体类型和媒体功能描述符,然后我将解释媒体查询。

媒体类型

媒体类型用于媒体查询和@import声明中,使我们能够确定将CSS文件或一段CSS加载到哪种媒体上。

我们有以下媒体类型

  • all意味着所有媒体
  • print打印时使用
  • screen当页面显示在屏幕上时使用
  • speech用于屏幕阅读器

screen是默认值。

过去,我们有更多此类设备,但由于已被证明不是确定设备需求的有效方法,因此大多数设备已弃用。

我们可以在@import语句中使用它们,如下所示:

@import url(myfile.css) screen;
@import url(myfile-print.css) print;

我们可以在多个用逗号分隔的媒体类型上加载CSS文件:

@import url(myfile.css) screen, print;

相同的作品linkHTML中的标记:

<link rel="stylesheet" type="text/css" href="myfile.css" media="screen" />
<link rel="stylesheet" type="text/css" href="another.css" media="screen, print" />

我们不仅限于在media属性和@import宣言。还有更多

媒体功能描述符

首先,我们来介绍一下媒体特征描述符。它们是我们可以添加到media的属性link或到@import声明,以表示有关CSS加载的更多条件。

以下是它们的列表:

  • width
  • height
  • device-width
  • device-height
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • orientation
  • scan
  • grid

它们每个都有对应的min- *和max- *,例如:

  • min-widthmax-width
  • min-device-widthmax-device-width

等等。

其中一些接受长度值,该长度值可以表示为px或者rem或任何长度值。是这样的widthheightdevice-widthdevice-height

例如:

@import url(myfile.css) screen and (max-width: 800px);

注意,我们在括号中使用媒体特征描述符包装了每个块。

有些接受固定值。orientation,用于检测设备方向,接受portrait或者landscape

例子:

<link rel="stylesheet" type="text/css" href="myfile.css" media="screen and (orientation: portrait)" />

scan,用于确定屏幕类型,接受progressive(用于现代显示器)或interlace(适用于较旧的CRT设备)

其他一些想要整数。

喜欢color它检查设备使用的每个颜色分量的位数。非常低级,但是您只需要知道它的使用位置即可(例如gridcolor-indexmonochrome)。

aspect-ratiodevice-aspect-ratio接受代表宽高视口比例的比例值,以分数表示。

例子:

@import url(myfile.css) screen and (aspect-ratio: 4/3);

resolution代表设备的像素密度,以分辨率数据类型喜欢dpi

例子:

@import url(myfile.css) screen and (min-resolution: 100dpi);

逻辑运算符

我们可以使用合并规则and

<link rel="stylesheet" type="text/css" href="myfile.css" media="screen and (max-width: 800px)" />

我们可以使用逗号执行“或”类型的逻辑运算,该运算结合了多个媒体查询:

@import url(myfile.css) screen, print;

我们可以用not否定媒体查询:

@import url(myfile.css) not screen;

重要的:not只能用于否定整个媒体查询,因此必须将其放在查询的开头(或逗号后)

媒体查询

我们看到的所有上述规则都适用于@import或linkHTML标记也可以在CSS内应用。

您需要将它们包装在@media () {}结构体。

例子:

@media screen and (max-width: 800px) {
  /* enter some CSS */
}

这是响应式设计

媒体查询可能非常复杂。此示例仅在屏幕设备,宽度在600到800像素之间且方向为横向的情况下才应用CSS:

@media screen and (max-width: 800px) and (min-width: 600px) and (orientation: landscape) {
  /* enter some CSS */
}

免费下载我的CSS手册


更多CSS教程: