@media 使用方法整理

最新推荐文章于 2024-06-01 09:39:57 发布

边中之城

最新推荐文章于 2024-06-01 09:39:57 发布

阅读量1.2k

点赞数

分类专栏：使用方法文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_41886421/article/details/129092968

版权

使用方法专栏收录该内容

37 篇文章 0 订阅

订阅专栏

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

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

可达到的效果

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

使用方法

在css中使用

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

在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">

条件(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>

结果：

在这里插入图片描述

媒体类型(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; // 深红色
    }
}

结果：

在这里插入图片描述

and

接多个媒体查询规则

逗号（,）

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

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

结果：

在这里插入图片描述

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

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

在这里插入图片描述

参考链接

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

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

边中之城

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
@media 使用方法整理

@media 使用方法整理
复制链接

扫一扫

专栏目录

@media 使用方法整理

可达到的效果

使用方法

在css中使用

在html中使用

条件(mediafeature)

媒体类型(mediatype)

常用关键字

not

only

and

逗号（,）

参考链接

“相关推荐”对你有帮助么？