在css中media query如何使用

CSS中的media query通过设备特性应用不同样式，常用于响应式设计。使用@media规则定义条件，如屏幕宽度、方向等，结合min-width、max-width和orientation等媒体特性，使页面适配手机、平板和桌面设备。

在CSS中，media query 用于根据设备的特性（如屏幕宽度、高度、方向、分辨率等）来应用不同的样式。它最常用于实现响应式网页设计，让页面在手机、平板、桌面等不同设备上都有良好的显示效果。

基本语法结构

media query 使用 @media 规则包裹一组CSS样式，只有当指定条件满足时，这些样式才会生效。

@media mediatype and (condition) {
  /* 满足条件时应用的样式 */
  body {
    background-color: lightblue;
  }
}

其中：

• mediatype：设备类型，比如 screen（屏幕）、print（打印）、all（所有设备）等。可省略，默认为 all。
• and：逻辑操作符，连接媒体类型和条件。
• (condition)：媒体特性表达式，例如最大宽度、最小宽度、设备方向等。

常用媒体特性

最常见的用途是根据视口宽度调整布局。以下是一些常用的条件：

• min-width：视口宽度大于或等于指定值时生效。
• max-width：视口宽度小于或等于指定值时生效。
• orientation：检测设备方向，如 portrait（竖屏）或 landscape（横屏）。
• resolution：检测像素密度，适用于高清屏幕。

实际使用示例

下面是一个典型的响应式布局写法：

免费 盛世企业网站管理系统(SnSee)系统完全免费使用，无任何功能模块使用限制，在使用过程中如遇到相关问题可以去官方论坛参与讨论。开源 系统Web代码完全开源，在您使用过程中可以根据自已实际情况加以调整或修改，完全可以满足您的需求。强大且灵活 独创的多语言功能，可以直接在后台自由设定语言版本，其语言版本不限数量，可根据自已需要进行任意设置；系统各模块可在后台自由设置及开启；强大且适用的后台管理支

/* 默认样式（小屏幕） */
.container {
  width: 100%;
  padding: 10px;
}
<p>/<em> 平板及以上设备（屏幕宽度 >= 768px） </em>/
@media screen and (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}</p><p>/<em> 桌面设备（屏幕宽度 >= 1024px） </em>/
@media screen and (min-width: 1024px) {
.container {
width: 980px;
}
}</p><p>/<em> 横屏设备 </em>/
@media screen and (orientation: landscape) {
body {
font-size: 16px;
}
}</p>

结合多个条件

可以使用 and 连接多个条件，也可以用 not 或 only 控制查询行为。

/* 在宽度介于 600px 到 1024px 之间的设备上生效 */
@media screen and (min-width: 600px) and (max-width: 1024px) {
  .sidebar {
    display: none;
  }
}

使用 not 可以否定整个查询（主要用于避免某些设备应用样式）。

基本上就这些。掌握好 media query 能让你的网页更灵活地适应各种设备。

以上就是在css中media query如何使用的详细内容，更多请关注其它相关文章！