前端学习day03

最新推荐文章于 2023-06-25 21:23:08 发布

linchuanyi510

最新推荐文章于 2023-06-25 21:23:08 发布

阅读量188

点赞数

本文链接：https://blog.csdn.net/devilincy/article/details/54576793

版权

今天学了个新东西，是根据屏幕宽度大小修改网页显示的内容。

大概查了下用法，@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

这个有时有效，有时会失效，具体是看电脑分辨率而定的，所以使用时要留意下这一点。

优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			@media screen and (max-width:800px) {
				/*当屏幕宽度小于或等于800px时*/
				div {
					width: 100px;
					height: 100px;
					background: red;
				}
			}	
			@media screen and (min-width:800px) {
				/*当屏幕宽度大于或等于800px时*/
				div {
					width: 200px;
					height: 200px;
					background: gold;
				}
			}
		</style>
	</head>

	<body>
		<div class="header"></div>
		<div class="bodys"></div>
	</body>
</html>

linchuanyi510

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习day03

今天学了个新东西，是根据屏幕宽度大小修改网页显示的内容。大概查了下用法，@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。这个有时有效，有时会失效，具体是看电脑分辨率而定的，所以使用时要留意下这一点。优点:无需插件和手机主题,对移动
复制链接

扫一扫