当前位置：首页 > 科技 > 软件

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

来源：责编：时间：2024-06-27 07:57:55 56观看

导读关于CSS的媒体查询CSS媒体查询是CSS层叠样式表(Cascading Style Sheets)中的一个核心功能，它使得开发者能够根据不同的设备特性和环境条件来应用不同的样式规则。这是实现响应式网页设计的关键技术，确保网站或应用能够

关于CSS的媒体查询

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

基础语法

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

@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媒体查询支持多种媒体特，以下是一些常用的媒体特性的详细说明：

宽度和高度特性：

width: 目标输出设备的视口宽度。
min-width: 视口宽度的最小值。
max-width: 视口宽度的最大值。
height: 目标输出设备的视口高度。
min-height: 视口高度的最小值。
max-height: 视口高度的最大值。

分辨率和像素比：

device-width 和 device-height: 设备的屏幕物理宽度和高度。
min-device-width 和 max-device-width: 设备屏幕物理宽度的最小值和最大值。
min-device-height 和 max-device-height: 设备屏幕物理高度的最小值和最大值。
resolution: 设备的分辨率，可以是dpi（每英寸点数）, dpcm（每厘米点数）或 dppx（每像素点数）。
min-resolution 和 max-resolution: 分辨率的最小值和最大值。

方向和比例：

orientation: 设备的方向，取值为portrait（竖屏）或landscape（横屏）。
aspect-ratio: 输出设备的宽高比，格式为x/y。
device-aspect-ratio: 设备的屏幕宽高比。

颜色和颜色索引：

color: 设备的颜色位数。
min-color 和 max-color: 设备颜色位数的最小值和最大值。
color-index: 设备的颜色索引数。
min-color-index 和 max-color-index: 设备颜色索引数的最小值和最大值。

环境和设备特性：

monochrome: 单色设备的颜色位数。
grid: 是否为网格设备，如终端。
scan: 显示设备的扫描方式，如progressive（逐行扫描）或interlace（隔行扫描）。
update-frequency: 显示更新频率，如slow或fast。

其他特性：

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的设备设置特定样式，可以这样写：

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

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

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

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

实战应用

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

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

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

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

@media (max-width: 600px) {    body {        font-size: 14px;    }}

2. 切换导航栏布局。

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

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

3. 隐藏和显示内容。

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

.sidebar {    display: block;}@media (max-width: 992px) {    .sidebar {        display: none;    }}

4. 优化图片展示。

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

<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");    }}

5. 调整列布局。

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

.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之间，并且设备处于横屏状态时，对页面布局进行特殊调整。

@media (min-width: 992px) and (max-width: 1199px) and (orientation: landscape) {    .content {        grid-template-columns: 2fr 1fr;    }    .sidebar {        order: 1;    }}

2. 使用特性查询来改变滚动行为。

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

@media (hover: none) and (pointer: coarse) {    body {        overflow-y: scroll;        -webkit-overflow-scrolling: touch;    }}

3. 根据颜色深度调整图像。

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

@media (color-gamut: p3) {    .high-color-image {        content: url('image-p3-color-gamut.jpg');    }}

4. 动态调整字体大小以适应不同的阅读距离。

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

@media (min-resolution: 2dppx) {    body {        font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (1600 - 320)));    }}

5. 针对不同分辨率和方向优化视频尺寸。

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

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

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

本文链接：http://www.28at.com/showinfo-26-96763-0.htmlCSS的媒体查询：响应式布局的利器

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇：三年探索，登录注册之路仍漫漫

下一篇：业内大佬怒喷：Go 正朝着错误的方向发展

标签：

热门焦点

K60至尊版刚预热一加Ace2 Pro正面硬刚

Redmi这边刚如火如荼的宣传了K60 Ultra的各种技术和硬件配置，作为竞品的一加也坐不住了。一加中国区总裁李杰发布了两条微博，表示在自家的一加Ace2上早就已经采用了和PixelWo
自动化在DevOps中的力量：简化软件开发和交付

自动化在DevOps中扮演着重要角色，它提升了DevOps的效能。通过自动化工具和方法，DevOps团队可以实现以下目标：消除手动和重复性任务。简化流程。在整个软件开发生命周期中实现更
WebRTC.Net库开发进阶，教你实现屏幕共享和多路复用！

WebRTC.Net库：让你的应用更亲民友好，实现视频通话无痛接入！除了基本用法外，还有一些进阶用法可以更好地利用该库。自定义 STUN/TURN 服务器配置WebRTC.Net 默认使用 Google 的
腾讯VS网易，最卷游戏暑期档，谁能笑到最后？

作者：无锈钵来源：财经无忌7月16日晚，上海1862时尚艺术中心。伴随着幻象的精准命中，硕大的荧幕之上，比分被定格在了14：12，被寄予厚望的EDG战队以绝对的优势战胜了BLG战队，拿下了总决
认真聊聊东方甄选：如何告别低垂的果实

来源：山核桃作者：财经无忌爆火一年后，俞敏洪和他的东方甄选依旧是颇受外界关心的“网红”。7月5日至9日，为期5天的东方甄选“甘肃行”首次在自有App内直播，
三星获批量产iPhone 15全系屏幕：苹果史上最惊艳直屏

按照惯例，苹果将继续在今年9月举办一年一度的秋季新品发布会，有传言称发布会将于9月12日举行，届时全新的iPhone 15系列将正式与大家见面，不出意外的话
iQOO Neo8系列今日官宣：首发天玑9200+ 全球安卓最强芯！

在昨日举行的的联发科新一代旗舰芯片天玑9200+的发布会上，iQOO官方也正式宣布，全新的iQOO Neo8系列新品将全球首发搭载这款当前性能最强大的移动平台
滴滴违法违规被罚80.26亿共存在16项违法事实

滴滴违法违规被罚80.26亿存在16项违法事实开始于2121年7月，历经一年时间，网络安全审查办公室对“滴滴出行”网络安全审查终于有了一个暂时的结束。据“网信
由于成本持续增加，笔记本产品价格预计将明显上涨

根据知情人士透露，由于材料、物流等成本持续增加，笔记本产品价格预计将在2021年下半年有明显上涨。进入6月下旬以来，全球半导体芯片缺货情况加剧，显卡、处理器