网站首页 > 技术文章正文

css 媒体查询 CSS媒体查询查询的是什么信息

hmc789 2024-11-11 12:52:02 技术文章 2 ℃

CSS 媒体查询是一种功能强大的技术手段，它可以根据不同的设备属性（例如视口宽度、屏幕比例、设备方向等）来应用不同的样式。这种技术在构建响应式和自适应设计方面具有巨大的优势，它能够确保您的网站在各种类型的设备上都呈现出良好的视觉效果。

基本语法

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

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

not：表示不匹配指定的媒体类型。
only：表示只匹配指定的媒体类型，这可以避免老旧浏览器执行不必要的样式表下载。
mediatype：指的是媒体类型，如 screen、print 等。
expressions：是一系列的媒体特性表达式，用来定义媒体查询的具体条件。

示例

一个简单的媒体查询示例：

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

/* 当视口宽度小于600px时，改变背景颜色 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightgreen;
  }
}

常见的媒体特性

一些常用的媒体特性包括：

width：视口的宽度。
height：视口的高度。
orientation：设备的方向（portrait 或 landscape）。
aspect-ratio：视口的宽高比。
device-pixel-ratio：设备的像素比率。
hover：设备是否支持悬停操作。
pointer：设备的指针精度。

我们可以针对手机、平板和电脑屏幕进行适配。

手机 - 通常屏幕宽度在 320px 到 480px 之间。
平板 - 屏幕宽度一般在 600px 到 1024px 之间。
电脑 - 屏幕宽度通常大于 1024px。

下面是针对这些设备的一个简单响应式布局示例。我们将使用一个简单的两栏布局，其中包含一个主要内容区域和一个侧边栏。侧边栏在手机屏幕上会被隐藏，在平板屏幕上会显示为下方的内容块，在电脑屏幕上则会显示为右侧的侧边栏。

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Layout Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Responsive Design Example</h1>
  </header>
  <div class="container">
    <main>
      <article>
        <h2>Main Content</h2>
        <p>This is the main content area. It will always be visible regardless of the device.</p>
      </article>
    </main>
    <aside>
      <h2>Sidebar</h2>
      <p>This is the sidebar with additional information. Its visibility and position will change based on the device type.</p>
    </aside>
  </div>
  <footer>
    <p>Footer Content</p>
  </footer>
</body>
</html>

CSS 样式

/* 全局样式 */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #f4f4f4;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

header, footer {
  background: #555;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}

header h1, footer p {
  margin: 0;
}

main, aside {
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
}

/* 手机屏幕 */
@media (max-width: 480px) {
  aside {
    display: none; /* 隐藏侧边栏 */
  }
}

/* 平板屏幕 */
@media (min-width: 481px) and (max-width: 1024px) {
  aside {
    display: block; /* 显示侧边栏 */
    width: 100%; /* 侧边栏占据全宽 */
    margin-top: 20px; /* 添加顶部间距 */
  }
}

/* 电脑屏幕 */
@media (min-width: 1025px) {
  .container {
    display: flex;
    justify-content: space-between;
  }

  main {
    flex: 2; /* 主要内容占据2/3的宽度 */
  }

  aside {
    flex: 1; /* 侧边栏占据1/3的宽度 */
  }
}

解释

全局样式：设置基本的字体、颜色、间距等。
手机屏幕：当屏幕宽度小于或等于 480px 时，侧边栏将被隐藏。
平板屏幕：当屏幕宽度介于 481px 和 1024px 之间时，侧边栏将显示，并占据整个宽度，位于主要内容下方。
电脑屏幕：当屏幕宽度大于 1024px 时，主内容区和侧边栏将并排显示，主内容区占据2/3的宽度，侧边栏占据1/3的宽度。

上一篇： css 中的媒体查询:灵活响应不同设备
下一篇： CSS中如何控制在不同屏幕下样式的变化

网站首页 > 技术文章 正文