【CSS3】多媒体查询

一颗不甘坠落的流星

已于 2023-07-25 11:27:52 修改

阅读量604

点赞数 4

分类专栏： CSS 笔记文章标签： CSS3 媒体查询响应式设计视口设备方向

于 2021-01-23 17:20:24 首次发布

本文链接：https://blog.csdn.net/qq_45677671/article/details/112248829

版权

CSS 笔记专栏收录该内容

22 篇文章 2 订阅

订阅专栏

文章目录

一、基本概念

CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想：取代了查找设备的类型，CSS3 根据设置自适应显示。
使用媒体查询是一种流行的技术，可以向台式机、笔记本电脑、平板电脑和手机（例如 iPhone 和 Android 手机）提供定制的样式表。

媒体查询可用于检测很多事情：

1. viewport(视窗) 的宽度与高度
2. 设备的宽度与高度
3. 朝向 (智能手机横屏，竖屏) 。
4. 分辨率

浏览器兼容性

二、基本用法

如果指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指定样式效果。

@media not|only mediatype and (expressions) {
    CSS 代码...;
}

值	作用	描述
all	默认值，所有设备	不指定就相当于默认all
not	用来排除掉某些特定的设备的	比如 @media not print（非打印设备）
only	用来定某种特别的媒体类型	对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。

多媒体类型：

属性	说明
all	用于所有多媒体类型设备
print	用于打印机
screen	用于电脑屏幕，平板，智能手机等。
speech	用于屏幕阅读器

示例：在视口宽度为 480 像素或更宽时将背景颜色更改为浅绿色（如果视口小于 480 像素，则背景颜色会是粉色）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一颗不甘坠落的流星</title>
		<style>
			body {
				background-color: pink;
			}

			@media screen and (min-width: 480px) {
				body {
					background-color: lightgreen;
				}
			}
		</style>
	</head>
	<body>
	</body>
</html>

扩展：webkit-overflow-scrolling 属性：控制元素在移动设备上是否使用滚动回弹效果

属性	描述
auto	使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止
touch	使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文

三、其他案例

想实现的效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一颗不甘坠落的流星</title>
		<style>
			* {
				box-sizing: border-box;
			}

			/* 设置顶部导航栏样式 */
			.topnav {
				overflow: hidden;
				background-color: #333;
			}

			/* 设置 topnav 链接的样式 */
			.topnav a {
				float: left;
				display: block;
				color: #f2f2f2;
				text-align: center;
				padding: 14px 16px;
				text-decoration: none;
			}

			/* 悬停时改变颜色 */
			.topnav a:hover {
				background-color: #ddd;
				color: black;
			}

			/* 在宽度为 600 像素或更小的屏幕上，使菜单链接彼此堆叠，而不是并排 */
			@media screen and (max-width: 600px) {
				.topnav a {
					float: none;
					width: 100%;
				}
			}
		</style>
	</head>
	<body>

		<h1>响应式导航菜单</h1>
		<p>请调整浏览器窗口的大小以查看效果：当屏幕小于 600 像素时，导航菜单将垂直显示，而不是水平显示。</p>

		<div class="topnav">
			<a href="#">Home</a>
			<a href="#">News</a>
			<a href="#">Contact</a>
			<a href="#">About</a>
		</div>

	</body>
	<script type="text/javascript"></script>
</html>

一颗不甘坠落的流星

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
【CSS3】多媒体查询

CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想：取代了查找设备的类型，CSS3 根据设置自适应显示。使用媒体查询是一种流行的技术，可以向台式机、笔记本电脑、平板电脑和手机（例如 iPhone 和 Android 手机）提供定制的样式表。
复制链接

扫一扫