用css搞定网页响应式颜色切换

最新推荐文章于 2023-02-22 23:45:48 发布

國榮张

最新推荐文章于 2023-02-22 23:45:48 发布

阅读量348

点赞数

本文链接：https://blog.csdn.net/qq_43686288/article/details/103113812

版权

@掌握

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1,minmum-scale=1,maxmun-scale=1,user-scalable=no">
		<head>
		<title>响应式切换</title>
		<style type="text/css">
			html{
				width:100%;
				height:100%;
				background-color: #000000;
			}
			body{
				width:100%;
				height:100%;
				background-color: #000000;
			}
			.warp_panel{
				height: 100%;
				width: 100%;
				background-color: #000000;
			}
			@media screen and (max-width:800px) and (min-width:500px){
				.warp_panel{
						background-color: #008000;
				}
				@media  screen and (max-width:500px){
					/* 重写样式 */
					    .warp_panel{
							background-color: #CF2D28;
				}									
			}
				/* 重写样式 */
		</style>
		
	</head>
	<body>
		<div class="warp_panel"></div>
	</body>
</html>

國榮张

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用css搞定网页响应式颜色切换

@掌握<!DOCTYPE html><html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1,minmum-scale=1,maxmun-scale=1,user-scalable=no"> <he...
复制链接

扫一扫