CSS3响应式布局(@media)

DaftJayee

于 2020-07-13 16:15:20 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_43540219/article/details/107319312

css 专栏收录该内容

28 篇文章

订阅专栏

本文深入讲解了响应式布局的概念及其实现方式，通过媒体查询(@media)让一套代码适应不同设备，如PC、平板和手机，保持URL统一，提高用户体验。文章详细解析了@media的语法格式及其应用场景。

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

一、@media 响应式布局（媒体查询）

什么是响应式布局：一套代码实现多种设备访问一致性(pc、平板、手机)

优点： 一直保持一个url，一套代码

缺点： 浏览器支持程度 (ie8和以下就不兼容了)

二、@media 使用

语法格式：

	@media only screen and (max-width:700px){

	}

	only   : 可以排除不支持媒体查询的浏览器
	screen ：设备类型
	max-width ：设备特性

		设备小于700像素....

	@media only screen and (max-width:300px) and (min-width:500px){
	
	}