媒体查询与响应式

字数: 0 字 时长: 0 分钟

简介

css3 中新增的媒体查询的新语法，它允许开发者根据不同的屏幕尺寸、分辨率或其他媒体特性来应用不同的，这样我们就可以通过这些样式规则来调整网页的布局和样式来实现响应式的布局。

媒体查询

基础语法

媒体查询的基础语法如下：

@media not|only mediaType and (mediafeature) {
  /* 样式规则 */
}

• not：取补集，表示不匹配指定的媒体类型和特性。
• only：指定某个特定的媒体类型，但在现代 CSS 中已不再推荐使用。
• mediaType：媒体类型，如 screen（用于电脑、平板、手机屏幕）、print（用于打印机及打印预览）等。
• mediaFeature：媒体特性，如 width（页面可见区域的宽）、height（页面可见区域的高）、device-width（设备的屏幕可见区域宽）等。

常用特性

• min-width和max-width：用于设置最小和最大宽度。
• min-height和max-height：用于设置最小和最大高度。
• orientation：用于检测设备是否处于横向或纵向模式，值 portrait 代表纵向，landscape 代表横向。
• aspect-ratio和device-aspect-ratio：用于设置或检测设备的宽度与高度的比。
• resolution：用于设置或检测设备的分辨率。

响应式

接下来，我们使用媒体查询来实现响应式布局。尝试改变浏览器的宽度，可以看到页面布局会根据不同的屏幕宽度进行响应式布局。

html

<div class="media-main">
  <div class="media-header">这是头部</div>
  <div class="media-content">
    <div class="media-item">这是第一段内容,...</div>
    <div class="media-item">这是第二段内容,...</div>
    <div class="media-item">这是第三段内容,...</div>
  </div>
</div>

css

.media-main {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.media-header {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px 0;
}

.media-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.media-item {
  width: calc(33.333% - 20px);
  margin: 10px;
  background-color: #f9f9f9;
  padding: 20px;
  box-sizing: border-box;
}

/* 屏幕宽度小于等于 768px 时，将 media-item 的宽度设置为 50% */
@media screen and (max-width: 768px) {
  .media-item {
    width: calc(50% - 20px);
  }
}

/* 屏幕宽度小于等于 480px 时，将 media-item 的宽度设置为 100% */
@media screen and (max-width: 480px) {
  .media-item {
    width: 100%;
  }
}

这是头部

这是第一段内容,这是第一段内容,这是第一段内容,这是第一段内容,这是第一段内容,这是第一段内容,这是第一段内容

这是第二段内容,这是第二段内容,这是第二段内容,这是第二段内容,这是第二段内容,这是第二段内容,这是第二段内容

这是第三段内容,这是第三段内容,这是第三段内容,这是第三段内容,这是第三段内容,这是第三段内容,这是第三段内容

最后更新于: 2024/11/7 20:11:51