CSS3-----媒体查询 @media

CSS媒体查询详解

最新推荐文章于 2024-10-03 10:48:55 发布

原创最新推荐文章于 2024-10-03 10:48:55 发布 · 225 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

前端知识专栏收录该内容

15 篇文章

订阅专栏

本文深入讲解了CSS媒体查询(@media)的使用方法，包括如何针对不同屏幕尺寸设置响应式设计，以及如何通过min-width和max-width等属性创建适用于各种设备的样式。通过具体示例，展示了如何为手机、平板和桌面设备定制不同的背景颜色。

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

CSS 语法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

and 多个媒体查询query使用。

not排除某种特定的媒体类型。

only定某种类型的媒体类型，可以用来排除不支持媒体查询的浏览器。针对不支持媒体特性query但支持媒体类型type的设备，来隐藏样式表。

你也可以针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

示例

.example {
    padding: 20px;
    color: white;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .example {background: red;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .example {background: green;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .example {background: blue;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .example {background: orange;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .example {background: pink;}
}