js_week1_1

最新推荐文章于 2024-04-25 19:15:02 发布

YoipdU

最新推荐文章于 2024-04-25 19:15:02 发布

阅读量45

点赞数

分类专栏： js笔记文章标签： js

本文链接：https://blog.csdn.net/qq_45839676/article/details/114392990

版权

js笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS

@media 媒体查询

当媒体查询被触发时，执行媒体查询内的语块。

常用设备屏幕宽度

PC	平板电脑	手机
1920 1440	1280 1024 768	812 736 667 568 480…

推荐使用断点

大桌面显示器	小桌面显示器	横屏平板	平板	小平板	大屏幕手机	小屏幕手机
w>1440	1440-1280	1280-1024	1027-768	768-640	640-375	375>w

断点语句

	@media(min-width:px值)
	@media(max-width:px值)

例子：当浏览器窗口长度改变时，改变方块颜色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.one{
				width: 800px;
				height: 400px;
				background-color: black;
				margin: 20px;
				float: left;
			}
			.two{
				font-size: 60px;
				margin: 0px;
				text-align: center;
				line-height: 400px;
			}
			.two::after{
				content: "";
				display: block;
				clear: both;
			}
			@media (min-width:1280px) and (max-width:1440px) {
				.one{
					width: 700px;
					height: 350px;
					margin: 15px;
					background-color: green;
				}
				.two{
					font-size: 50px;
					line-height: 350px;
				}
			}
			@media (min-width:1024px) and (max-width:1280px) {
				.one{
					width: 600px;
					height: 300px;
					margin: 15px;
					background-color: blue;
				}
				.two{
					font-size: 40px;
					line-height: 300px;
				}
			}
			@media (min-width:769px) and (max-width:1024px) {
				.one{
					width: 500px;
					height: 250px;
					margin: 10px;
					background-color: yellow;
				}
				.two{
					font-size: 30px;
					line-height: 250px;
				}
			}
			@media (min-width:640px) and (max-width:768px) {
				.one{
					width: 400px;
					height: 200px;
					margin: 10px;
					background-color: red;
				}
				.two{
					font-size: 25px;
					line-height: 200px;
				}
			}
			@media (min-width:375px) and (max-width:640px) {
				.one{
					width: 100%;
					height: 200px;
					margin: 10px;
					background-color: pink;
				}
				.two{
					font-size: 40px;
					line-height: 80px;
				}
			}
			@media (max-width:375px) {
				.one{
					width: 100%;
					height: 150px;
					margin: 0px;
					background-color: orange;
				}
				.two{
					font-size:20px;
					line-height: 40px;
				}
			}
		</style>
	</head>
	<body>
		<div class="one">
			
		</div>
		<p class="two">
			Hello World
		</p>
		<div class="one">
			
		</div>
		<p class = "two">
			Hello World
		</p>
	</body>
</html>

YoipdU

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js_week1_1

CSS@media 媒体查询当媒体查询被触发时，执行媒体查询内的语块。常用设备屏幕宽度PC平板电脑手机1920 14401280 1024 768812 736 667 568 480…推荐使用断点大桌面显示器小桌面显示器横屏平板平板小平板大屏幕手机小屏幕手机w>14401440-12801280-10241027-768768-640640-375375>w断点语句 @media(min-width:p
复制链接

扫一扫