学习日记-css3 响应式布局

参考网址：
http://www.runoob.com/cssref/css3-pr-mediaquery.html

主要使用：css3 的属性 @media

参考代码：

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
body {
    background-color:lightgreen;
}
 
@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}
</style>
</head>
<body>
<p>重置浏览器查看大小。当浏览器窗口的宽度小于 300 像素时，背景颜色会变成淡蓝，否则是淡绿色。<input type="button" onclick="resize_window()" value="查看效果"></p>
 
</body>
</html>

上一篇服务器：同域名搭建多个项目

下一篇文字省略出现 box-orient

本文作者：轻风细雨_林木木

本文链接：https://www.cnblogs.com/linzhifen5/p/16961443.html

posted @ 2022-12-06 22:22 轻风细雨_林木木阅读(19) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

轻风细雨_林木木

做最优秀的自己。

学习日记-css3 响应式布局

公告

常用链接

最新随笔

我的标签

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<style>
	body {
	background-color:lightgreen;
	}

	@media screen and (max-width: 300px) {
	body {
	background-color:lightblue;
	}
	}
	</style>
	</head>
	<body>
	<p>重置浏览器查看大小。当浏览器窗口的宽度小于 300 像素时，背景颜色会变成淡蓝，否则是淡绿色。<input type="button" onclick="resize_window()" value="查看效果"></p>

	</body>
	</html>