网站首页 > 技术文章正文

23.HTML 媒体查询（web媒体查询）

nanyue 2024-10-21 06:20:05 技术文章 14 ℃

随着移动设备的普及，响应式网页设计变得越来越重要。响应式设计的核心理念是让网页能够适应不同的屏幕尺寸和分辨率。媒体查询是实现响应式设计的关键技术之一，它允许我们根据不同的设备特性来应用不同的CSS样式规则。

媒体查询基础

媒体查询由两部分组成：媒体类型（如 screen、print 等）和至少一个使用逻辑表达式的查询条件（如 min-width、orientation 等）。当媒体查询的条件返回真值时，相关的CSS样式则会被应用。

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

@media not|only mediatype and (expressions) {
  /* CSS 规则 */
}

not: 排除某种特定的媒体类型。
only: 指定某种特定的媒体类型，用于防止老旧浏览器不支持媒体查询的情况。
mediatype: 媒体类型，比如 screen、print。
expressions: 逻辑表达式，用于检测设备的特性，如宽度、高度等。

媒体查询实例

例子 1: 根据屏幕宽度改变背景颜色

/* 默认样式 */
body {
  background-color: lightblue;
}

/* 屏幕宽度至少为 600px */
@media screen and (min-width: 600px) {
  body {
    background-color: pink;
  }
}

/* 屏幕宽度至少为 900px */
@media screen and (min-width: 900px) {
  body {
    background-color: orange;
  }
}

在这个例子中，当屏幕宽度小于600px时，背景颜色为浅蓝色；宽度在600px到899px之间时，背景颜色变为粉色；宽度达到900px及以上时，背景颜色变为橙色。

例子 2: 根据屏幕宽度调整布局

.container {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

/* 两列布局 */
@media screen and (min-width: 600px) {
  .column {
    float: left;
    width: 50%;
  }
}

/* 三列布局 */
@media screen and (min-width: 900px) {
  .column {
    width: 33.3333%;
  }
}

在这个例子中，.container 默认是一个宽度为100%的容器。当屏幕宽度至少为600px时，.column 类的元素会并排排列成两列布局；当屏幕宽度至少为900px时，变为三列布局。

例子 3: 针对不同设备调整字体大小

/* 默认字体大小 */
body {
  font-size: 14px;
}

/* 平板设备 */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  body {
    font-size: 16px;
  }
}

/* 横屏显示 */
@media screen and (orientation: landscape) {
  body {
    font-size: 18px;
  }
}

在这个例子中，字体大小根据设备宽度和方向进行调整。平板设备在宽度介于768px到1024px之间时，字体大小增加到16px；当设备处于横屏模式时，字体大小增加到18px。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout with Media Query</title>
<style>
  body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
  }

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

  .sidebar {
    background-color: #f9f9f9;
    padding: 15px;
    border-bottom: 1px solid #ddd;
  }

  .main-content {
    padding: 15px;
  }

  .footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
  }

  /* Responsive layout for screens wider than 600px */
  @media (min-width: 600px) {
    .container {
      display: flex;
    }

    .sidebar {
      flex: 1;
      order: 1;
      border-bottom: none;
      border-right: 1px solid #ddd;
    }

    .main-content {
      flex: 3;
      order: 2;
    }
  }
</style>
</head>
<body>

<div class="header">
  <h1>Responsive Page</h1>
</div>

<div class="container">
  <div class="sidebar">
    <h2>Sidebar</h2>
    <p>This is the sidebar area, which contains navigation links and other information.</p>
  </div>

  <div class="main-content">
    <h2>Main Content</h2>
    <p>This is the main content area. It will display the primary information of the page.</p>
  </div>
</div>

<div class="footer">
  <p>Footer Content ? 2023</p>
</div>

</body>
</html>

结语

媒体查询是实现响应式设计的强大工具。通过合理使用媒体查询，我们可以确保网页在各种设备上都能提供良好的用户体验。随着技术的发展，我们还可以利用更多高级的媒体查询特性，如检测分辨率、设备方向等，来进一步优化响应式设计。

上一篇：实现快捷生成HTML代码（html快捷生成div）
下一篇： HTML的自定义元素——由资深前端程序员教你

网站首页 > 技术文章 正文