CSS学习（10）CSS3的媒介查询media

走马Ricardo
121 阅读6分钟

前言

  • 如何使用媒体查询实现视口宽度大于320px小于640px时div元素宽度为30%

媒体查询

媒体查询英文全称为 Media Query，指查询用户所使用的媒体或媒介。

目前，网页的浏览终端是越来越多，用户可以通过不同的终端来浏览网页，例如：PC，平板电脑，手机，电视等。尽管我们无法保证一个网站在不同屏幕尺寸和不同设备上看起来一模一样，但是至少要让Web页面能适配用户的终端。

在CSS3中的Media Query(媒体查询)模块就是用来让一个页面适应不同的终端。

设备类型 Media Type

首先我们来认识一下CSS中所支持的媒体类型。

在CSS2中已经支持这三种媒体类型：all(全部)、screen(屏幕)和print(页面打印或打印预览模式)。然而媒体的类型其实远不止这3种。

值描述
all用于所有设备
aural已废弃。用于语音和声音合成器
braille已废弃。 应用于盲文触摸式反馈设备
embossed已废弃。 用于打印的盲人印刷设备
handheld已废弃。 用于掌上设备或更小的装置，如PDA和小型电话
print用于打印机和打印预览
projection已废弃。 用于投影设备
screen用于电脑屏幕，平板电脑，智能手机等。
speech应用于屏幕阅读器等发声设备
tty已废弃。 用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备
tv已废弃。 用于电视和网络电视

媒体类型引用方法

引用媒体类型的方法有和很多，常见的媒体类型引用方法有：link标签、xml方式、@import和CSS3新增的@media。

  1. link标签

link标签引入媒体类型其实就是在link标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。

<link rel="stylesheet" href="screen.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
  1. xml方式（不常用）

xml方式和link方式比较相似，也是通过media属性来指定，如下：

<? xml-stylesheet rel="stylesheet" media="screen" href="screen.css" ?>
  1. @import（不推荐）

@import引入媒体类型主要方式有两种，一种是在CSS文件中通过@import引入另一个样式文件，另一种是在style标签中引入，关于@import可以参考之前的文章CSS学习（9）@import。

/* 只在媒体为 print 的时候导入 print.css */ 
@import url('./test.css') print;
  1. @media（重点）

@media是CSS3中新引进的一个特性，叫媒体查询。@media引入媒体同样也有两种方式，如下：

在样式文件中引入媒体类型：

@media screen {
  /*具体样式*/
}

在style标签中引入媒体类型：

<style>
    @media screen {
      /*具体样式*/
  }
</style>

媒体查询具体语法

这里我们可以将媒体查询看成一个公式

Media Type(判断条件) + CSS(符合条件的样式规则)

例如

  • link的方式
<link rel="stylesheet" href="screen.css" media="screen and (min-width: 480px)">
  • @media的方式
@media screen and (min-width: 480px) {
  /* 在视口最小宽度为 480px 的时候应用 */
}

上面的两个例子中都是使用 width 来进行的样式判断，但是实际上还有很多特性都可以被用来当作样式判断的条件。

其他条件参考下表

值描述
aspect-ratio定义输出设备中的页面可见区域宽度与高度的比率
color定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
color-index定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
device-aspect-ratio定义输出设备的屏幕可见宽度与高度的比率。
device-height定义输出设备的屏幕可见高度。
device-width定义输出设备的屏幕可见宽度。
grid用来查询输出设备是否使用栅格或点阵。
height定义输出设备中的页面可见区域高度。
max-aspect-ratio定义输出设备的屏幕可见宽度与高度的最大比率。
max-color定义输出设备每一组彩色原件的最大个数。
max-color-index定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height定义输出设备的屏幕可见的最大高度。
max-device-width定义输出设备的屏幕最大可见宽度。
max-height定义输出设备中的页面最大可见区域高度。
max-monochrome定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution定义设备的最大分辨率。
max-width定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color定义输出设备每一组彩色原件的最小个数。
min-color-index定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width定义输出设备的屏幕最小可见宽度。
min-device-height定义输出设备的屏幕的最小可见高度。
min-height定义输出设备中的页面最小可见区域高度。
min-monochrome定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution定义设备的最小分辨率。
min-width定义输出设备中的页面最小可见区域宽度。
monochrome定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
orientation定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan定义电视类设备的扫描工序。
width定义输出设备中的页面可见区域宽度。

有了 Media Query，我们能在不同的条件下使用不同的样式，使页面在不同的终端设备下达到不同的渲染效果。

这里还有个公式：

@meida 媒体类型 and (媒体特性){
  /* 具体样式 */
}

例如：

/* 该媒体特性是指媒体类型小于或等于800px时，样式生效 */
@media screen and (max-width: 800px) {
  body {
    background-color: lightblue;
  }
}

/* 该媒体特性是指媒体类型大于或等于600px时，样式生效 */
@media screen and (min-width: 600px) {
  body {
    background-color: lightblue;
  }
}

/* 该媒体特性是指媒体类型在600px到800px之间时，样式生效 */
@media screen and (min-width: 600px) and (max-width: 800px) {
  body {
    background-color: lightblue;
  }
}

not关键字可以用来排除某种媒体特性，例如：

/* 该媒体特性是指媒体类型不是屏幕且屏幕宽度小于或等于800px时，样式生效 */
@media not screen and (max-width: 800px) {
  body {
    background-color: lightblue;
  }
}

如果未指明媒体设备，那么默认为all，就是应用于所有设备

@media (max-width: 800px) {
  body {
    background-color: lightblue;
  }
}

总结

  • 如何使用媒体查询实现视口宽度大于320px小于640px时div元素宽度为30%
@media screen and (min-width: 320px) and (max-width: 640ox) {
    div {
        width: 30%;
    }
}
avatar
文章
阅读
粉丝