mkimq

媒体查询

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

媒体设备

下面是常用媒体类型，当然主要使用的还是screen

选项说明
all所有媒体类型
screen用于电脑屏幕，平板电脑，智能手机等
print打印设备
speech应用于屏幕阅读器等发声设备

注：tty, tv, projection, handheld, braille, embossed, aural 设备类型已经被废弃

  • 可以使用 link 与 style 中定义媒体查询
  • 也可以使用 @import url(screen.css) screen 形式媒体使用的样式
  • 可以用逗号分隔同时支持多个媒体设备
  • 未指定媒体设备时等同于all
  1. style

下面是在屏幕显示与打印设备上不同的CSS

<style media="screen">
    ...
</style>

<style media="print">
    ...
</style>

2 link

  • 在 link 标签中通过 media 属性可以设置样式使用的媒体设备。
    • common.css 没有指定媒体所以全局应用
    • screen.css 应用在屏幕设备
    • print.css 应用在打印设备
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="screen.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">

可以在 CSS 文件中使用 @media 再定义媒体样式

  1. @import

使用@import 可以引入指定设备的样式规则。文件中引入一个样式文件，在这个文件中再引入其他媒体的样式文件。

<link rel="stylesheet" href="style.css">

@import url(screen.css) screen;
@import url(print.css) print;
  1. @media

可以使用 @media 做到更细的控制，即在一个样式表中为多个媒体设备定义样式。

@media screen {
    ...
}

@media print {
    ...
}
  1. 多设备支持

可以用逗号分隔同时支持多个媒体设备。

@import url(screen.css) screen,print;
<link rel="stylesheet" href="screen.css" media="screen,print">
@media screen,print {...}

设备方向

使用orientation属性可以定义设备的方向

值说明
portrait竖屏设备即高度大于宽度
landscape横屏设备即宽度大于高度

下面是尺寸小于768px或是横屏时使用蓝色字体

<style media="screen and (min-width: 768px), screen and (orientation:landscape)">
    body {
        color: blue;
    }
</style>

<h1>baidu</h1>

查询条件

  • 可以使用不同条件限制使用的样式
    • 条件表达式需要放在扩号中

逻辑与

  • 需要满足多个条件时才使用样式，多个条件使用and 连接。下例中满足以下要求才使用样式。
    • 横屏显示
    • 宽度不能超过600px
@media screen and (orientation: landscape) and (max-width: 600px) {
    ...
}

逻辑或

  • 多个或 条件查询使用逗号连接，不像其他程序中使用 or 语法。
    • 下面的示例中如果设备是横屏显示或宽度不超600px时就使用样式规则。
@media screen and (orientation: landscape),
screen and (max-width: 600px) {
    ...
}

不应用

  • not 表示不应用样式，即所有条件都满足时不应用样式。
    • 必须将not写在查询的最前面
@media not screen and (orientation: landscape) and (max-width: 600px) {
    ...
}

only

  • 用来排除不支持媒体查询的浏览器。
    • 对支持媒体查询的设备，正常调用样式，此时就当only不存在
    • 对不支持媒体查询的设备不使用样式
    • only 和 not 一样只能出现在媒体查询的开始
@media only screen and (orientation: landscape) and (max-width: 600px) {
	...
}

查询特性

根据查询特性筛选出使用样式的设备。

  1. 常用特性
特性说明
orientation: landscape | portraitlandscape横屏，portrait竖屏
width设备宽度
height设备高度
min-width最小宽度
max-width最大宽度
min-height最小高度
max-height最大高度
贡献者: mankueng