前端HTML中的媒体查询

钱端攻城狮

已于 2022-02-28 17:37:10 修改

阅读量957

点赞数 1

分类专栏： HTML 文章标签：前端 html 媒体

于 2022-02-25 21:13:55 首次发布

本文链接：https://blog.csdn.net/m0_54932975/article/details/123141218

版权

HTML 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.one{
				width: 300px;
				height: 300px;
				background-color: pink;
			}
			/*监听的是浏览器窗口的大小     最小能监听到的范围*/
			@media only screen and (min-width: 800px) {
				body{
					background-color: yellow;
				}
			}
			/*最大能监听到的宽度是600px*/
			@media only screen and (max-width: 600px) {
				#one{
					background-color: seagreen;
				}
			}
			/*@media only screen and (min-width: 500px) and (max-width: 1000px) {
				body{
					background-color: yellow;
				}
			}*/
		</style>
	</head>
	<body>
		<div class="one">
			
		</div>
	</body>
</html>
<!--
	媒介查询
	其实是监听对象的宽度或者高度 并且设置一个临界值 当达到临界值时 触发媒介查询里对应的代码 
对页面进行修改
	语法：
	@media 监听设置类型 and (设置临界值){
		设置需要修改的布局的代码
	}
	监听设备类型：
	1.only screem (默认且重点而且常用) 用于手机 平板 电脑
	2.print 打印机
	3.speech 读音设备
	4.all 所有设备
-->

运行结果：
在这里插入图片描述
当窗口缩小时

会根据你窗口大小发生变化

钱端攻城狮

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端HTML中的媒体查询

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .one{ width: 300px; height: 300px; background-color: pink; } /*监听的是浏览器窗口的大小最小能监听到的范围*/
复制链接

扫一扫