媒体media查询响应式设置测试代码

最新推荐文章于 2023-04-09 00:18:03 发布

一个前端女子

最新推荐文章于 2023-04-09 00:18:03 发布

阅读量301

点赞数

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

本文链接：https://blog.csdn.net/qq_44173499/article/details/123154315

版权

HTML 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

媒体media查询响应式设置测试代码

Markup

/* media 响应式布局 关键  把设备区间设置好 在指定区间内去写某些区域内的所需要的样式 */
@media screen and (min-width:1171px) {
	body{
		background-color: red;
	}
}

@media screen and (min-width:1024px) and (max-width:1170px) {
	body{
		background-color: pink;
	}
}

/* 屏幕小于等于1023 */
@media screen  and (max-width:1023px){
	body{
		background-color:darkorange;
	}
}

@media screen and (max-width:768px) {
	body{
		background-color:lightskyblue;
	}
}
@media screen and (max-width:480px) {
	body{
		background-color:lightseagreen;
	}
}