前端技术

Css 中媒体查询的使用方法

媒体查询 “@media” 可以针对不同设备以及不同屏幕尺寸设置不同的样式,特别是如果你需要设置响应式的页面,@media 是非常有用的。

当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

语法

// 写入 .css 文件或 <style> 标签
@media mediatype and|not|only (media feature) {
  ...
}
// 导入外部 css 文件
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="filename.css">

媒体类型

媒体类型 (mediatype) 用于描述设备的一般类别,支持的类型包括:

  • all: 适用于所有设备
  • screen: 适用于屏幕
  • print: 适用于在打印预览模式下在屏幕上查看的分页材料和文档
  • speech: 主要用于语音合成器

对于做网站而言,常用的则是 “screen” 与 “print”。

媒体特性

媒体特性 (Media features) 用于描述输出设备,或是浏览环境的具体特征。媒体特性表达式是完全可选的,它负责监听这些特性是否存在或具体的值。每条媒体特性表达式都必须用圆括号包裹起来。

常用的媒体特性

  • width: 视窗宽度
  • min-width: 视窗最小宽度
  • max-width: 视窗最大宽度
  • orientation: 视窗旋转方向 ( 横向 “landscape” 、纵向 “portrait” )
  • resolution: 输出设备的像素密度(分辨率)
  • aspect-ratio: 视窗的宽高比

逻辑操作符

逻辑操作符(logical operators) “not”, “and”, 和 “only” 可用于联合构造复杂的媒体查询,您还可以通过用逗号分隔多个媒体查询,将它们组合为一个规则。

“and” 操作符用于将多个媒体查询规则组合成单条媒体查询,当每个查询规则都为真时则该条媒体查询为真,它还用于将媒体特性与媒体类型结合在一起。

@media (min-width: 30em) and (max-width: 50em) { ... }

“not” 运算符用于否定媒体查询,如果不满足这个条件则返回true,否则返回false。 如果出现在以逗号分隔的查询列表中,它将仅否定应用了该查询的特定查询。 如果使用not运算符,则还必须指定媒体类型。

// 以下两种形式表达的是相同的意思

@media not screen and (color), print and (color) { ... }

@media (not (screen and (color))), print and (color) { ... }

“only” 运算符仅在整个查询匹配时才用于应用样式,并且对于防止较早的浏览器应用所选样式很有用。 当不使用 only 时,旧版本的浏览器会将screen and (max-width: 500px)简单地解释为screen,忽略查询的其余部分,并将其样式应用于所有屏幕。 如果使用only运算符,则还必须指定媒体类型。

@media only screen and (color) { ... }

您可以使用 “or" 测试多个功能之间的匹配,如果任何功能为true,则解析为true。 例如,以下查询测试具有单色显示或悬停功能的设备:

@media (not (color)) or (hover) { ... }

“,” 逗号用于将多个媒体查询合并为一个规则。 逗号分隔列表中的每个查询都与其他查询分开处理。 因此,如果列表中的任何查询为true,则整个media语句均返回true。 换句话说,列表的行为类似于逻辑或or运算符。

书写示例

//当设备为屏幕,且最大宽度为10240px时,调用里面的样式
@media screen and (max-width: 1024px) {
  ...
}
//当设备为屏幕,最大宽度为10240px且为竖屏时,调用里面的样式
@media screen and (max-width: 1024px) and (orientation: portrait) {
  ...
}
//当设备为打印机,且最小宽度为600px时,导入此文件
<link rel="stylesheet" type="text/css" href="print.css" media="print and (min-width: 600px)">

补充

1、设置Meta标签

在 head 标签内添加以下内容,让当前viewport的宽度等于设备的宽度:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

2、加载兼容文件JS

因为IE8既不支持HTML5也不支持CSS3 Media,所以我们需要加载两个JS文件,来保证我们的代码实现兼容效果:

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

3、设置IE渲染方式默认为最高

现在有很多人的IE浏览器都升级到IE9以上了,所以这个时候就有又很多诡异的事情发生了,例如现在是IE9的浏览器,但是浏览器的文档模式却是IE8,为了防止这种情况,我们需要下面这段代码来让IE的文档模式永远都是最新的(这部分可以选择添加也可以不添加)

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

参考链接

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries

https://www.cnblogs.com/gaogch/p/10628613.html

PUJI Design 朴及设计 (c) 2024. 沪ICP备17052229号