媒体查询介绍

最新推荐文章于 2024-05-06 11:46:07 发布

月疯

最新推荐文章于 2024-05-06 11:46:07 发布

阅读量824

点赞数

分类专栏：【HTML5】

本文链接：https://blog.csdn.net/chehec2010/article/details/119461828

版权

【HTML5】专栏收录该内容

45 篇文章 6 订阅

订阅专栏

媒体查询：去检测设备的特性（手机端编程使用）
媒体查询可以让我们获取根据设备显示器的特性（如视口的宽度、屏幕的比例、设备的方向：横向或者纵向）
为其设定css样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测媒体的特性有width、height
和color（等）。使用媒体查询，可以在不改变页面的情况下，为特定的一些输出设备指定显示效果。

媒体查询操作方式
实际操作为：对设备提出询问（称作表达式）开始，如果表达式结果为真，媒体查询中的css被应用，如果表达式为假，媒体查询内的css将被忽略。

媒体查询结构：
@media all and（min-width:320px）{
body{backgroud-color:blue}
}

改变body的小例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>打到尺寸改变body的颜色</title>
		<style type="text/css">
			body{
				background: orange;
			}
			@media screen and (min-width:1000px) and (max-width:1300px) {
				body{
					background: red;
				}
			}
			/* and俩端必须要加空格 */
			@media screen and (min-width:750px) and (max-width:999px) {
				body{
					background: green;
				}
			}
		</style>
	</head>
	<body>
	</body>
</html>

手机横竖屏：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			@media screen and (orientation:portrait) {
				body{
					background: orange;
				}
			}
			@media screen and (orientation:landscape) {
				body{
					background: blue;
				}
			}
		</style>
	</head>
	<body>
	</body>
</html>

月疯

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
媒体查询介绍

媒体查询：去检测设备的特性（手机端编程使用）媒体查询可以让我们获取根据设备显示器的特性（如视口的宽度、屏幕的比例、设备的方向：横向或者纵向）为其设定css样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测媒体的特性有width、height和color（等）。使用媒体查询，可以在不改变页面的情况下，为特定的一些输出设备指定显示效果。媒体查询操作方式实际操作为：对设备提出询问（称作表达式）开始，如果表达式结果为真，媒体查询中的css被应用，如果表达式为假，.
复制链接

扫一扫