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

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

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

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

@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;}
}
  1. 切换导航栏布局

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

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

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

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

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

<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. 调整列布局

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

.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;}
}
  1. 使用特性查询来改变滚动行为

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

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

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

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

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

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

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

@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.mzph.cn/bicheng/36237.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

YOLOV8图像分割预测后输出mask图

训练一个yolov8后&#xff0c;用官方的预测脚本一般是&#xff1a; results model.predict(img_path, saveTrue, save_diroutput_folder) 运行此代码会直接在run里面生成一个文件夹&#xff0c;保存预测图像。如果要获取分割后的mask点&#xff0c;或mask的轮廓点&#xff0…

nacos使用shared-configs设置多个配置文件后,配置中修改无法动态更新 解决办法

问题描述 今天使用nacos去做配置分离&#xff0c;启动成功了&#xff0c;配置也读取了&#xff0c;但是当我修改nacos中的配置时&#xff0c;发现数据无法动态更新 下面是测试接口的调用 可以看到我修改配置后&#xff0c;接口返回的参数依然是老参数 问题排查 首先检查了…

C++实现一个简单的Qt信号槽机制

昨天写这个文章《深入探讨C的高级反射机制&#xff08;2&#xff09;&#xff1a;写个能用的反射库》的时候就在想&#xff0c;是不是也能在这套反射逻辑的基础上&#xff0c;实现一个类似Qt的信号槽机制&#xff1f; Qt信号槽机制简介 所谓的Qt的信号槽&#xff08;Signals …

基于VUE3+VITE+SpringBoot+Nginx部署项目之跨域配置等问题

前言&#xff1a;遇到问题&#xff0c;解决问题。 第一部分&#xff1a;VUE 配置 1、vite.config.js 文件 server: {proxy: {/api: {target: env.VITE_BASE_URL,changeOrigin: true,secure: false,rewrite: path > path.replace(/^\/api/, )}}}, 2、.env 文件 VITE_BAS…

springcloud-config 客户端启用服务发现client的情况下使用metadata中的username和password

为了让spring admin 能正确获取到 spring config的actuator的信息&#xff0c;在eureka的metadata中添加了metadata.user.user metadata.user.password eureka.instance.metadata-map.user.name${spring.security.user.name} eureka.instance.metadata-map.user.password${spr…

气象相关图表制作-字体图标、图片、折线的堆叠

开发工作中有个需要展示气温&#xff08;折线&#xff09;、天气&#xff08;图片&#xff09;、风羽&#xff08;字体图标&#xff09;的图表展示需求&#xff0c;之前用过highcharts的关于类似的chart&#xff0c;里面的风雨用的是自带的图片&#xff0c;但是现在要求风羽需要…

Windows环境本地部署开源在线演示文稿应用PPTist并实现远程访问

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

Elasticsearch exists 和 missing 查询:检查字段是否存在或缺失

在Elasticsearch中&#xff0c;数据通常以文档的形式存储&#xff0c;而每个文档又包含多个字段。在查询数据时&#xff0c;我们经常需要知道某个字段是否存在或者是否缺失。为了满足这种需求&#xff0c;Elasticsearch提供了exists和missing查询&#xff0c;它们允许我们基于字…

Linux双网卡默认路由的metric设置不正确,导致SSH连接失败问题定位

测试环境 VMware虚拟机 RockyLinux 9 x86_64 双网卡&#xff1a;eth0(访问外网): 10.206.216.92/24; eth1(访问内网) 192.168.1.4/24 问题描述 虚拟机重启后&#xff0c;SSH连接失败&#xff0c;提示"Connection time out"&#xff0c;重启之前SSH连接还是正常的…

基础指标 派生指标 计算指标 这些指标的区别是什么?

基础指标、派生指标、计算指标这些指标的区别是什么&#xff1f; 基础指标、派生指标和计算指标在数据分析和业务度量中各自扮演着不同的角色&#xff0c;它们之间的区别主要体现在定义、构建方式和用途上。 基础指标&#xff08;基础指标/原子指标&#xff09;&#xff1a; …

基于Spring Boot医护人员排班系统

设计技术&#xff1a; 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringbootMybatisvue 工具&#xff1a;IDEA、Maven、Navicat 主要功能&#xff1a; 医护类型管理 医护人员排班系统的系统管理员可以对医护类型添加修改删除以及查询操作。具体界面…

SS8870T-3.6A 扫地机和滚刷电机的大电流电机驱动

扫地机器人已经成为现代家庭清洁的必备工具&#xff0c;而其中的关键部件——电机&#xff0c;对于其性能和用户体验起着至关重要的作用。为了确保扫地机器人的高效清洁和稳定运行&#xff0c;至少需要使用7个直流电机&#xff0c;包括行走轮、滚轮、边刷和吸尘等功能的驱动。 …

Python接口测试课程,每天学会一个Python小知识!

第一天: Python基础 Python简介、环境搭建及包管理 Python简介&#xff1a; 特点&#xff1a;Python是一门动态、解释型、强类型语言 动态&#xff1a;在运行期间才做数据检查&#xff08;不用提前声明变量&#xff09;- 静态语音(C/Java)&#xff1a;编译时检查数据类型&…

根据指定日期自定义el-date-picker日期选择器样式

需求 功能需要在DatePicker日期选择器中&#xff0c;对有数据的日期下方添加小圆点提示样式&#xff0c;后台会返回按年份查询的日期数据 dayjs插件 dayjs中文网&#xff1a;https://dayjs.fenxianglu.cn/ npm install dayjs实现点 配置picker-options对象中的cellClassName属性…

django 逆向生成对应数据库表的models模型类 —— python

一&#xff0c;在setting.py中配置好连接数据库的参数 在setting中的DATABASESZ中配置默认参数&#xff0c;并在INSTALLED_APPS中导入模块名。 DATABASES {default:{ENGINE: django.db.backends.mysql, # 数据库引擎NAME: jljupcs, # 数据库名称HOST: 127.0.0.1, # 数据库…

亚马逊商品详情的 API 接口获取与分析:挖掘商业价值的关键技术

在当今竞争激烈的电商领域&#xff0c;获取和分析准确的商品详情信息对于企业和开发者来说至关重要。亚马逊作为全球领先的电商平台&#xff0c;其丰富的商品资源和庞大的用户群体为商业决策提供了极具价值的数据。通过 API 接口获取亚马逊商品详情并进行深入分析&#xff0c;已…

检索增强生成RAG系列1--RAG的实现

大模型出现涌现能力之后&#xff0c;针对大模型的应用也如雨后春笋般。但是&#xff0c;在大模型真正落地之前&#xff0c;其实还需要做好最后一公里&#xff0c;而这个最后一公里&#xff0c;其中不同应用有着不同的方法。其中prompt、微调和RAG都是其中方法之一。本系列就是针…

网络协议 -- IP、ICMP、TCP、UDP字段解析

网络协议报文解析及工具使用介绍 1. 以太网帧格式及各字段作用 -------------------------------- | Destination MAC Address (48 bits) | -------------------------------- | Source MAC Address (48 bits) …

JVM 知识总结

是什么 JVM是Java Virtual Machine&#xff08;Java虚拟机&#xff09;的缩写&#xff0c;是通过在实际的计算机上仿真模拟各种计算机功能来实现的。由一套字节码指令集、一组寄存器、一个栈、一个垃圾回收堆和一个存储方法域等组成。JVM屏蔽了与操作系统平台相关的信息&#…

介绍Java反射的基本原理和安全措施

一、Java反射的基本原理 Java反射&#xff08;Reflection&#xff09;是Java语言的一个特性&#xff0c;它允许程序在运行时对自身进行检查&#xff0c;并且能够操作类、接口、字段和方法等。反射提供了强大的功能&#xff0c;但也带来了一定的技术难点。 基本原理&#xff1…