CSS的媒体查询：响应式布局的利器

server/2024/9/22 23:35:08/

Hippopx (2).jpg
在这里插入图片描述

关于CSS的媒体查询

CSS媒体查询是CSS层叠样式表(Cascading Style Sheets)中的一个核心功能，它使得开发者能够根据不同的设备特性和环境条件来应用不同的样式规则。这是实现响应式网页设计的关键技术，确保网站或应用能够在多种设备上，包括桌面、平板、手机等，提供良好的用户体验。

基础语法

媒体查询的基本结构如下：

css">@media media-type and (media-feature: value) {/* CSS 样式规则 */
}

选项解释

  • media-type：定义媒体类型，如 screen（用于电脑屏幕、手机屏幕等）、print（用于打印）、speech（用于屏幕阅读器）。默认值为 all，意味着规则适用于所有类型的媒体。
  • media-feature：媒体特性，用来检查设备的特定条件，比如视口宽度(width)、高度(height)、设备像素比(device-pixel-ratio)、颜色(color)等，这些特性允许你根据不同的设备条件和环境来定制样式。
  • value：媒体特性所对应的值或范围。
  • and, not, only：逻辑操作符，用于结合多个媒体类型或特性，实现更复杂的查询条件。

常见媒体特性

CSS媒体查询支持多种媒体特，以下是一些常用的媒体特性的详细说明：

  1. 宽度和高度特性：
  • width: 目标输出设备的视口宽度。
  • min-width: 视口宽度的最小值。
  • max-width: 视口宽度的最大值。
  • height: 目标输出设备的视口高度。
  • min-height: 视口高度的最小值。
  • max-height: 视口高度的最大值。
  1. 分辨率和像素比：
  • device-width 和 device-height: 设备的屏幕物理宽度和高度。
  • min-device-width 和 max-device-width: 设备屏幕物理宽度的最小值和最大值。
  • min-device-height 和 max-device-height: 设备屏幕物理高度的最小值和最大值。
  • resolution: 设备的分辨率，可以是dpi（每英寸点数）, dpcm（每厘米点数）或 dppx（每像素点数）。
  • min-resolution 和 max-resolution: 分辨率的最小值和最大值。
  1. 方向和比例：
  • orientation: 设备的方向，取值为portrait（竖屏）或landscape（横屏）。
  • aspect-ratio: 输出设备的宽高比，格式为x/y。
  • device-aspect-ratio: 设备的屏幕宽高比。
  1. 颜色和颜色索引：
  • color: 设备的颜色位数。
  • min-color 和 max-color: 设备颜色位数的最小值和最大值。
  • color-index: 设备的颜色索引数。
  • min-color-index 和 max-color-index: 设备颜色索引数的最小值和最大值。
  1. 环境和设备特性：
  • monochrome: 单色设备的颜色位数。
  • grid: 是否为网格设备，如终端。
  • scan: 显示设备的扫描方式，如progressive（逐行扫描）或interlace（隔行扫描）。
  • update-frequency: 显示更新频率，如slow或fast。
  1. 其他特性：
  • any-hover: 检测是否有任何指针设备能悬停。
  • any-pointer: 指针精度，如fine、coarse或none。
  • hover: 指针是否能悬停。
  • pointer: 主要输入设备的精度。
  • inverted-colors: 用户是否启用了颜色反转。
  • prefers-color-scheme: 用户偏好颜色方案，如light、dark或no-preference。
  • prefers-reduced-motion: 用户是否偏好减少动画或运动。
  • prefers-contrast: 用户的对比度偏好，如no-preference、high或low。

使用示例

假设我们要为宽度小于等于480px的设备设置特定样式，可以这样写：

css">@media (max-width: 480px) {body {font-size: 14px;}
}

这段代码意味着，当视口宽度不超过480像素时，body元素的字体大小会被设置为14像素。

复杂的设计可能需要结合多个条件，例如：如果视口宽度在大于480，小于1000的时候，body元素的字体大小会被设置为18像素；如果视口宽度大于1000的时候，body元素的字体大小会被设置为22像素

css">@media  (min-width: 480px) and (max-width: 1000px) {body{font-size: 18px;}
}
@media  (min-width: 1000px) {body{font-size: 22px;}
}

实战应用

媒体查询广泛应用于响应式设计中，允许开发者根据不同设备的特性和用户的浏览环境，灵活地调整布局、字体大小、图片尺寸等，确保内容的可读性和易用性。

以下是几个CSS媒体查询的实战例子，这些示例覆盖了响应式设计中常见的应用场景：

  1. 调整字体大小以适应小屏幕

在屏幕宽度小于600px时减小文本的字体大小，以提高阅读体验。

css">@media (max-width: 600px) {body {font-size: 14px;}
}
  1. 切换导航栏布局

当屏幕宽度足够大时，显示水平导航栏；当屏幕较窄时，将其转换为垂直折叠式导航。

css">/* 默认样式，可能适用于移动端 */
.navbar {display: flex;flex-direction: column;
}/* 当屏幕宽度至少为768px时，变为水平布局 */
@media (min-width: 768px) {.navbar {flex-direction: row;}
}
  1. 隐藏和显示内容

在小屏幕上隐藏某些非核心内容或组件，以减少信息密度，提升用户体验。

css">.sidebar {display: block;
}@media (max-width: 992px) {.sidebar {display: none;}
}
  1. 优化图片展示

根据屏幕尺寸加载不同分辨率的图片，节省流量并提升加载速度。

css"><img src="image-mobile.jpg" srcset="image-desktop.jpg 1024w, image-tablet.jpg 768w" alt="Example Image"><!-- CSS -->
@media (min-width: 769px) {img[src*="mobile"] {content: url("image-tablet.jpg");}
}@media (min-width: 1025px) {img[src*="tablet"] {content: url("image-desktop.jpg");}
}
  1. 调整列布局

在不同屏幕尺寸下自动调整网格布局，比如从单列到两列再到多列布局。

css">.container {display: grid;grid-template-columns: repeat(1, 1fr);
}@media (min-width: 768px) {.container {grid-template-columns: repeat(2, 1fr);}
}@media (min-width: 1024px) {.container {grid-template-columns: repeat(3, 1fr);}
}

实战进阶

以上示例展示了媒体查询如何帮助我们根据不同的设备条件和屏幕尺寸来调整网页的视觉表现，从而实现更加灵活和优化的响应式设计。当然，还有一些更高级的用法，以实现更细致的设备特性和更精细的布局调整方面的灵活性。

  1. 结合多个条件调整布局

当屏幕宽度在992px到1199px之间，并且设备处于横屏状态时，对页面布局进行特殊调整。

css">@media (min-width: 992px) and (max-width: 1199px) and (orientation: landscape) {.content {grid-template-columns: 2fr 1fr;}.sidebar {order: 1;}
}
  1. 使用特性查询来改变滚动行为

在触摸屏设备上启用更平滑的滚动体验。

css">@media (hover: none) and (pointer: coarse) {body {overflow-y: scroll;-webkit-overflow-scrolling: touch;}
}
  1. 根据颜色深度调整图像

针对具有高色彩深度显示的设备提供更高品质的图像资源。

css">@media (color-gamut: p3) {.high-color-image {content: url('image-p3-color-gamut.jpg');}
}
  1. 动态调整字体大小以适应不同的阅读距离

根据设备的像素密度调整字体大小，以确保在不同设备上字体的物理尺寸一致。

css">@media (min-resolution: 2dppx) {body {font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (1600 - 320)));}
}
  1. 针对不同分辨率和方向优化视频尺寸

在宽屏设备上保持视频的宽高比，并在窄屏设备上全屏显示视频。

css">@media (min-aspect-ratio: 16/9) {video {width: 100%;height: auto;}
}@media (max-aspect-ratio: 16/9) {video {width: auto;height: 100%;}
}

今天分享的内容非常干，也很实用，得空好好消化一下吧。

喜欢就关注一下吧.gif


http://www.ppmy.cn/server/53123.html

相关文章

Redis队列自研组件

Redis队列自研组件

背景 年初的时候设计实践过一个课题&#xff1a;SpringBootRedis实现不重复消费的队列&#xff0c;并用它开发了一个年夜饭下单和制作的服务。不知道大家还有没有印象。完成这个课题后&#xff0c;我兴致勃勃的把它运用到了项目里面&#xff0c;可谁曾想&#xff0c;运行不久后…
阅读更多...
C#udpClient组播

C#udpClient组播

一、0udpClient 控件&#xff1a; button&#xff08;打开&#xff0c;关闭&#xff0c;发送&#xff09;&#xff0c;textbox&#xff0c;richTextBox 打开UDP&#xff1a; UdpClient udp: namespace _01udpClient {public partial class Form1 : Form{public Form1(){Initi…
阅读更多...
6. Revit API UI: PreviewControl（预览控件）

6. Revit API UI: PreviewControl（预览控件）

6. Revit API UI: PreviewControl&#xff08;预览&#xff09; PreviewControl 有时我们需要一个预览功能&#xff0c;而Revit也提供了一个PreviewControl类来帮助我们实现这个功能。 从类的继承关系来看&#xff0c;PreviewControl就是一个用户自定义控件&#xff0c;它就…
阅读更多...
三篇卫星切换的论文

三篇卫星切换的论文

目录 一、Energy-Aware Satellite Handover based on Deep Reinforcement Learning 1、题目翻译 2、来源 3、内容 二、A Reliable Handover Strategy with Second Satellite Selection in LEO Satellite Networks 1、题目翻译 2、来源 3、内容 三、User Grouping-Based…
阅读更多...
2024《汽车出海全产业数据安全合规发展白皮书》下载

2024《汽车出海全产业数据安全合规发展白皮书》下载

随着中国制造向中国智造目标的迈进&#xff0c;中国汽车正以前所未有的速度和质量&#xff0c;在全球市场上开疆拓土。不过&#xff0c;在中国汽车加快出海步伐的过程中&#xff0c;数据安全合规风险管理成为车企不容忽视的课题。 6月25日&#xff0c;在中国&#xff08;上海&…
阅读更多...
android 13 root

android 13 root

一&#xff1a;修改系统文件 需要修改一些系统文件&#xff0c;以允许adbd进程在root用户下运行&#xff0c;并关闭Verity检查。我们需要修改以下文件&#xff1a; 1.frameworks/base/core/jni/com_android_internal_os_Zygote.cpp 这个文件负责创建应用程序进程&#xff0c…
阅读更多...
Jetpack - Navigation: 一个全面的安卓开发指南

Jetpack - Navigation: 一个全面的安卓开发指南

引言 导航是任何安卓应用程序中至关重要的部分。无缝地在不同的屏幕之间移动并传递数据&#xff0c;对于流畅的用户体验来说至关重要。在这篇博客中&#xff0c;我们将深入探讨Jetpack的Navigation组件&#xff0c;这个强大的框架旨在简化安卓应用中的导航。我们将涵盖从设置和…
阅读更多...
深入理解Servlet Filter及其限流实践

深入理解Servlet Filter及其限流实践

引言 在Java Servlet技术中&#xff0c;Filter是一个拦截器&#xff0c;它允许开发者在请求到达目标资源之前或响应发送给客户端之后&#xff0c;对请求或响应进行拦截和处理。这种机制为实现诸如身份验证、日志记录、请求修改等功能提供了极大的灵活性。 Filter基础 Filter…
阅读更多...
最新文章

Copyright @ 2022~2023