CSS-媒体查询

最新推荐文章于 2024-05-22 12:05:09 发布

zsd_666

最新推荐文章于 2024-05-22 12:05:09 发布

阅读量61

点赞数

文章标签： css 媒体 css3

本文链接：https://blog.csdn.net/zhao3756/article/details/129909926

版权

CSS-媒体查询

我们可以使用@media语法来确定屏幕尺寸, 并且指定在不同尺寸下的元素样式. 例如, 我们指定一个元素在不同屏幕尺寸下的大小:

@media screen and (min-width: 1200px) {
	.container {
		width: 1127px;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

@media screen and (min-width: 922px) and (max-width: 1199px) {
	.container {
		width: 933px;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

@media screen and (min-width: 768px) and (max-width: 922px) {
	.container {
		width: 723px;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

@media screen and (max-width: 768px) {
	.container {
		width: 100%;
		padding: 0px 10px 0px 10px !important;
		box-sizing: border-box;
	}
}