媒体查询实现响应式布局

南张人

于 2019-01-22 22:57:55 发布

阅读量3.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签：媒体查询响应式布局 @media bootstrap 原理 css技巧

本文链接：https://blog.youkuaiyun.com/u011848617/article/details/86602949

web前端专栏收录该内容

40 篇文章

订阅专栏

本文详细介绍了如何使用@media查询进行响应式布局，通过在不同屏幕尺寸下设定特定样式，解决跨设备适配问题。文中提及Bootstrap原理，并提示读者理解xs、sm、md、lg等断点概念，帮助实现CSS的屏幕适配和布局调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文主要介绍 @media 查询的使用。通过媒体查询，在不同的屏幕尺寸下，可以设置不同的样式。以此，可以完美解决不同屏幕适配的问题。话不多说，先来看看效果：

CSS

@media screen and (max-width: 400px) {
	.btn {
		background-color: lightblue;
	}
}

@media screen and (min-width: 400px) and (max-width: 800px) {
	.btn {
		background-color: yellowgreen;
	}
}

@media screen and (min-width: 800px) {
	.btn {
		background-color: orangered;
	}
}

.btn {
	width: 100%;
	height: 60px;
	border: none;
	outline: none;
}

解析：

将大大小小的屏幕尺寸划分为连续的几个宽度区间，在各个宽度区间内，设置各自的元素属性。这样在不同宽度的屏幕上，媒体查询会根据具体的屏幕尺寸适配到对应的区间，来应用此区间内的元素属性，达到适配不同屏幕的效果。