@media 使用方法整理_html @media print

作者：羊村懒王 | 2024-03-29 10:09:07

踩

html @media print

不同媒体类型、设备、条件样式应用不同的类型

简单的来说：告诉浏览器或者其他运行环境，满足a条件时，a样式生效；满足b条件时，b样式生效

可达到的效果

监听屏幕的高度（vh）和宽度（vw）
监听设备的高度与高度
监听设备方向（比如手机的竖屏和横屏）
监听分辨率（resolution）等等

使用方法

在css中使用

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  // 自定义样式
}
1
2
3

在html中使用

<!-- 宽度大于 900px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<!-- 宽度小于或等于 600px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
1
2
3
4

条件(mediafeature)

当屏幕尺寸不一样时，显示不同的样式，具体有以下4中类型：

max-width：满足条件的最大可视化宽度，小于此都会显示定义样式
min-width：满足条件的最小可视化宽度，大于此都会显示定义样式
max-height：满足条件的最大可视化高度，小于此都会显示定义样式
min-height：满足条件的最小可视化高度，大于此都会显示定义样式

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
body {
    background-color:lightgreen;
}

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue; // 淡蓝色
    }
}
@media screen and (min-width: 300px){
	body {
        background-color:darkred; // 深红色
    }
}
</style>
</head>
<body>
<p>重置浏览器查看大小。当浏览器窗口的宽度小于 300 像素时，背景颜色会变成淡蓝，否则是淡绿色。<input type="button" onclick="resize_window()" value="查看效果"></p>
<SCRIPT>
<!--
function resize_window() {
        window.open ('https://www.runoob.com/try/demo_source/trycss3_media_example1.htm','newwindow','height=299,width=299,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
}
//写成一行
-->
</SCRIPT>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

结果：

在这里插入图片描述

媒体类型(mediatype)

@media 可以针对不同的媒体类型设置不同的样式，具体有以下几种：

all：所有多媒体类型设备
print：打印机和打印机预览
screen：电脑屏幕、手机、平板等等
speech：屏幕阅读器

常用关键字

not，and和only可用于联合构造复杂的媒体查询，使用, 分隔多个媒体查询，讲他们组合成一个规则

not

排除的媒体查询

在这里插入图片描述

only

只满足的媒体查询

// 【屏幕】生效样式
@media screen and (max-width: 300px) {
    body {
        background-color:lightblue; // 淡蓝色
    }
}
// 【打印机设备】生效样式
@media only print and (min-width: 300px){
	body {
        background-color:darkred; // 深红色
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

结果：

在这里插入图片描述

and

接多个媒体查询规则

逗号（,）

可满足的多个媒体查询，类似于or

@media print, screen and (min-width: 300px){
	body {
        background-color:darkorange; // 深橙色
    }
}
1
2
3
4
5

结果：

在这里插入图片描述

注意：对于媒体类型（Media types），一般会默认all类型，比如：

// 默认【所有设备-all】生效样式
@media (min-width: 300px){
	body {
		background-color: darkgreen; // 深绿色
	}
}
1
2
3
4
5
6

在这里插入图片描述

参考链接

https://www.runoob.com/cssref/css3-pr-mediaquery.html

https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/335257