css3媒体查询

原创于 2022-04-30 22:53:15 发布 · 794 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #媒体 #css

css 专栏收录该内容

9 篇文章

订阅专栏

媒体查询@media是CSS3中的一个重要特性，用于实现响应式网页设计。它允许根据设备的特性，如屏幕尺寸，定义不同的样式。例如，当屏幕宽度小于或等于600px时，可以改变body的背景颜色。媒体查询可以避免在不同设备上显示不一致的问题，尤其适用于手机和平板等移动设备。通过在<link>标签中设置media属性，可以指定针对不同屏幕尺寸加载不同的CSS样式文件，从而优化不同设备的用户体验。

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

媒体查询 (Media Query) 是css3的新语法
       1.使用 @media 查询，可以针对不同的媒体类型定义不同的样式
       2.@media 可以针对不同的屏幕尺寸设置不同的样式
       3.当你重置浏览器大小的过程中，页面也会根据浏览器的宽高重新渲染页面
       4.目前手机平板多在用媒体查询

语法规范
       @media mediatype and|not|only (media feature) {
           css-code;
       }
       1.用@media开头注意@符号
       2.mediatype 媒体类型 screen手机类型
       3.关键字 and并且 not非 only特定(可以省略)
       4.media feature 媒体特性必须由小括号包裹

@media scree and (max-width: 600px) {
			>=
			max-width是最大宽 也就是说 不会大于 600px
			body {
				不大于 600px改变body的背景
				background-color: red;
			}
		}

媒体查询引入css 来改变大屏小屏的css样式
       优点，当样式比较繁多的时候，我们可以针对不同的媒体使用不同的样式。
       原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件。
       语法结构
       <link rel="stylesheet" media="screen and (min-width: 600px)" href="css样式文件名"/>