当前位置: 首页 > news >正文

CSS3中的@media查询

CSS3的@media查询是一种强大的功能,允许我们根据不同的媒体类型和设备特性来应用不同的样式规则。这使得我们能够创建响应式设计,确保网站或应用在各种设备和屏幕尺寸上都能提供良好的用户体验。本文将详细探讨@media查询的定义、语法、使用场景及常见问题。

一、@media查询的定义

CSS3的@media规则允许你根据媒体类型和媒体特性来应用不同的样式规则。媒体类型(Media Type)如screen(屏幕)、print(打印)等,而媒体特性(Media Features)如widthheightorientation等,用于描述设备的具体特征。

二、@media查询的基本语法

@media查询的基本语法如下:

@media mediatype and|not|only (media feature) {/* CSS 规则 */
}
  • mediatype:指定媒体类型,如screenprint等。如果省略,则默认为所有媒体类型。
  • media feature:定义媒体特性和值的条件,如min-widthmax-widthorientation等。

三、逻辑运算符

在@media查询中,可以使用以下逻辑运算符来组合媒体条件:

  • and:表示所有条件都必须满足。
  • not:表示条件不满足时应用样式。
  • only:用于防止不支持媒体查询的老旧浏览器应用样式。
  • 逗号:表示多个条件中任一满足时应用样式。

四、使用场景

1. 根据屏幕尺寸设置样式

@media screen and (min-width: 600px) {body {background-color: lightblue;}
}

当屏幕宽度至少为600像素时,页面背景颜色变为浅蓝色。

2. 响应式设计

@media screen and (max-width: 800px) {.container {width: 100%;}
}@media screen and (min-width: 801px) {.container {width: 750px;}
}

根据屏幕宽度改变容器宽度,以实现响应式设计。

3. 打印样式

@media print {body {font-size: 12pt;color: black;background: white;}
}

为打印设置特定的样式,如字体大小、颜色和背景。

4. 横屏与竖屏

@media screen and (orientation: landscape) {#sidebar {display: none;}
}

当设备处于横向模式时,隐藏侧边栏。

五、常用媒体特性

CSS3提供了多种媒体特性,以下是一些常用的特性:

  • widthmin-widthmax-width:定义输出设备中的页面可见区域宽度。
  • heightmin-heightmax-height:定义输出设备中的页面可见区域高度。
  • orientation:定义设备方向,如portrait(竖屏)和landscape(横屏)。
  • resolution:定义设备的分辨率。
  • colorcolor-index:定义颜色能力和颜色索引。

六、注意事项

  1. 媒体条件排序:当使用min-widthmax-width作为判断条件时,应确保条件范围从小到大或从大到小排序,以避免样式覆盖问题。
  2. 样式冲突:确保@media查询中的样式不被后面的CSS规则所覆盖。建议将@media查询的样式写在后面。
  3. meta标签:设置<meta name="viewport" content="width=device-width, initial-scale=1.0">以确保移动设备能正确渲染页面。
  4. 语法错误:确保@media查询的语法正确,特别是逻辑运算符后的空格和括号内不要写结束符“;”。

七、总结

CSS3的@media查询是创建响应式设计的重要工具,允许我们根据不同的媒体类型和媒体特性来应用不同的样式规则。通过合理利用@media查询,我们可以确保网站或应用在各种设备和屏幕尺寸上都能提供优秀的用户体验。希望本文能够帮助你更好地理解和使用@media查询。

相关文章:

CSS3中的@media查询

CSS3的media查询是一种强大的功能&#xff0c;允许我们根据不同的媒体类型和设备特性来应用不同的样式规则。这使得我们能够创建响应式设计&#xff0c;确保网站或应用在各种设备和屏幕尺寸上都能提供良好的用户体验。本文将详细探讨media查询的定义、语法、使用场景及常见问题…...

fly专享

要逐步熟悉实验中的各个步骤&#xff0c;下面是详细的说明&#xff0c;包括如何下载软件以及相关操作步骤。 1. 熟悉VMware 15虚拟机的使用 步骤说明&#xff1a; 下载VMware Workstation 15&#xff1a; 打开浏览器&#xff0c;访问VMware官方网站&#xff1a;VMware Workst…...

初识Linux · 进程(3)

目录 前言&#xff1a; 进程的创建 前言&#xff1a; 继上文介绍了着重介绍了进程的内部属性&#xff0c;以及在操作系统层面进程如何被组织起来的&#xff0c;如何调用系统接口&#xff0c;有关task_struct&#xff0c;进程的部分理解等&#xff0c;今天&#xff0c;我们就…...

【spring】spring bean对象生命周期,spring容器如何管理bean,spring容器的名称是叫什么

【spring】spring bean对象生命周期&#xff0c;spring容器如何管理bean&#xff0c;spring容器的名称是叫什么 DefaultListableBeanFactory开始 spring 容器 DefaultListableBeanFactory DefaultListableBeanFactory是Spring的核心BeanFactory实现&#xff0c;它负责Bean的创…...

基于51单片机的电饭锅控制系统proteus仿真

地址&#xff1a; https://pan.baidu.com/s/1CGyg6uPhFI0MeaBWwe_HAg 提取码&#xff1a;1234 仿真图&#xff1a; 芯片/模块的特点&#xff1a; AT89C52/AT89C51简介&#xff1a; AT89C52/AT89C51是一款经典的8位单片机&#xff0c;是意法半导体&#xff08;STMicroelectro…...

创建dataSource错误

说明&#xff1a;记录一次启动项目时的异常&#xff0c;如下&#xff1a; Error starting ApplicationContext. To display the conditions report re-run your application with debug enabled. 2024-09-14 23:27:27.338 ERROR 42260 --- [ main] o.s.boot.SpringA…...

为解决bypy大文件上传报错—获取百度云文件直链并使用Aria2上传文件至服务器

问题描述 一方面组内的服务器的带宽比较小&#xff0c;另一方面使用bypy方式进行大文件(大于15G)上传时会报错&#xff08;虽然有时可以成功上传&#xff0c;但是不稳定&#xff09;&#xff1a; 解决方式 总体思路: 获得云盘需要下载文件的直链复制直链到服务器中使用自带…...

53.9k star 提升命令行效率的模糊搜索神器--fzf

fzf简介 作为Linux/Unix命令行的重度用户,你是否还在使用繁琐的管道命令与复杂选项组合来过滤文件和数据?其实我们有一个更简单高效的选择 - fzf。 fzf是一个开源的通用模糊搜索工具,可以大幅度提升命令行的使用体验。它的查询运行速度极快,支持预览选中的文件内容,还能与各…...

项目需求 | MySQL增量备份与恢复的完整操作指南

目录 一、MySql数据库增量备份的工作原理 1、全量备份与增量备份 2、增量备份原理 二、进行增量备份 步骤1&#xff1a;启用二进制日志 使用 SHOW VARIABLES 命令查看二进制日志状态 步骤2&#xff1a;执行增量备份脚本 三、使用增量备份恢复损坏的数据库 步骤1&#…...

判断当前环境是否为docker容器下

判断当前环境是否为docker容器下 webshell后或登录到系统后台&#xff0c;判断是否为docker容器可使用如下方法&#xff1a; 方式一&#xff1a;使用ls -alh命令查看是否存在.dockerenv来判断是否在docker容器环境内 ls -alh /.dockerenv如下图无.dockerenv文件&#xff0c;所…...

深入理解FastAPI中的root_path:提升API部署灵活性的关键配置

在Web开发领域&#xff0c;FastAPI因其高性能、易于使用和类型提示功能而备受开发者喜爱。然而&#xff0c;当涉及到在生产环境中部署FastAPI应用程序时&#xff0c;我们常常需要面对一些挑战&#xff0c;比如如何正确处理代理服务器添加的路径前缀。这时&#xff0c;root_path…...

QLORA:高效微调量化大型语言模型

人工智能咨询培训老师叶梓 转载标明出处 传统的16位精度微调需要超过780GB的GPU内存&#xff0c;对于参数量极大的模型&#xff0c;如65B&#xff08;即650亿参数&#xff09;的模型&#xff0c;在资源有限的情况下大模型的微调几乎是不可能的。华盛顿大学的研究者团队提出了一…...

CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载 裁剪区域绘制

版本简介&#xff1a; cesium&#xff1a;1.99&#xff1b;Supermap3D&#xff1a;SuperMap iClient JavaScript 11i(2023)&#xff1b; 官方下载文档链家&#xff1a;SuperMap技术资源中心|为您提供全面的在线技术服务 示例参考&#xff1a;support.supermap.com.cn:8090/w…...

Fish-Speech 部署安装指南

Fish Speech 是由 Fish Audio 团队开发的一款开源文本转语音&#xff08;TTS&#xff09;模型&#xff0c;它在多语言支持和性能方面取得了显著的突破。根据证据显示&#xff0c;Fish Speech 最新版本为 1.4 版本&#xff0c;该版本不仅提升了对多种语言的支持&#xff0c;还大…...

Excel 国产化替换新方案

前言 在当前数字化转型和信创&#xff08;信息技术应用创新&#xff09;战略背景下&#xff0c;企业对于安全性、自主可控性和高效办公工具的需求日益增加。作为一款国产自主研发的高性能表格控件&#xff0c;SpreadJS 正成为替换 Excel 的最佳选择。它不仅全面支持国产化认证…...

在职研生活学习--20240908

文章目录 九月八日清晨&#xff0c;我们在鸟鸣声中醒来&#xff0c;精神饱满地迎接大汇演的挑战。上午&#xff0c;我们被分成舞龙队、旗手队、拳队、鼓队四个特色团队进行练习。阳光下&#xff0c;我们挥汗如雨&#xff0c;却乐此不疲。鼓声隆隆&#xff0c;龙舞飞扬&#xff…...

chattr:修改文件的特殊属性

​chattr ​命令用于改变文件的特殊属性&#xff0c;也称为"chattr 属性"。这些属性可以提供额外的安全性和控制&#xff0c;如设置文件为不可修改、只允许在文件末尾添加数据等。 ‍ 一、Linux 文件属性 文件属性是指与文件相关联的元数据&#xff0c;这些属性决…...

vue-router 在新的标签页打开链接/路由

前言 vue-router 在新的标签页打开链接/路由&#xff0c;由于官方没有提供对链接target属性的配置&#xff0c;要实现这个需求&#xff0c;需要自行实现&#xff0c;这里提供几个方案供参考。 调用 API vue-router 的路由实例除了常见的 push, replace, go 等接口&#xff0…...

Ansys HFSS的边界条件与激励端口

本文将介绍HFSS边界条件、激励端口,然后重点介绍连接器信号完整性仿真应用最多的波端口(wave port)及其尺寸设置要点。 HFSS (电磁仿真)边界条件 HFSS中所谓的边界并非真正意义上的边界,边界条件是指定问题区域和对象边缘的场行为接口。在HFSS的背景下,边界的存在主要有两个…...

C++:线程库

C&#xff1a;线程库 threadthreadthis_threadchrono 引用拷贝问题 mutexmutextimed_mutexrecursive_mutexlock_guardunique_lock atomicatomicCAS condition_variablecondition_variable thread 操作线程需要头文件<thread>&#xff0c;头文件包含线程相关操作&#xf…...

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

日常一水C

多态 言简意赅&#xff1a;就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过&#xff0c;当子类和父类的函数名相同时&#xff0c;会隐藏父类的同名函数转而调用子类的同名函数&#xff0c;如果要调用父类的同名函数&#xff0c;那么就需要对父类进行引用&#…...