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查询。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/53952.shtml

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

相关文章

C++学习笔记(26)

七 、显示字符串中的字符 从界面上输入一个字符串&#xff08;C 风格&#xff09;&#xff0c;把字符串中的每个字符显示出来&#xff0c;如果输入的是"abc"&#xff0c;要求&#xff1a; 1&#xff09;正序显示&#xff1a;a b c 2&#xff09;逆序显示&#xff1a;…

实战千问2大模型第三天——Qwen2-VL-7B(多模态)视频检测和批处理代码测试

画面描述:这个视频中,一位穿着蓝色西装的女性站在室内,背景中可以看到一些装饰品和植物。她双手交叉放在身前,面带微笑,似乎在进行一场演讲或主持活动。她的服装整洁,显得非常专业和自信。 一、简介 阿里通义千问开源新一代视觉语言模型Qwen2-VL。其中,Qwen2-VL-72B在大…

vue2——使用Element-UI实现可搜索的树形结构

树形结构在日常开发中非常常见&#xff0c;例如菜单、组织架构等场景。Element-UI作为一款基于Vue.js的桌面端组件库&#xff0c;提供了丰富的组件供开发者使用。其中&#xff0c;Tree组件可以轻松实现树形结构的展示。但在实际项目中&#xff0c;我们往往需要实现可搜索的树形…

在k8s中,客户端访问服务的链路流程,ingress--->service--->deployment--->pod--->container

ingress是一个API资源。 其核心作用是nginx网页服务器。 当客户端访问服务器不同的url时, 用不同的location提供服务。 在k8s之外&#xff0c;nginx的配置一般如下&#xff1a; http {server {listen 80;server_name localhost;location / {root html; …

【鸿蒙OH-v5.0源码分析之 Linux Kernel 部分】003 - vmlinux.lds 链接脚本文件源码分析

【鸿蒙OH-v5.0源码分析之 Linux Kernel 部分】003 - vmlinux.lds 链接脚本文件源码分析 系列文章汇总:《鸿蒙OH-v5.0源码分析之 Uboot+Kernel 部分】000 - 文章链接汇总》 本文链接:《【鸿蒙OH-v5.0源码分析之 Linux Kernel 部分】003 - vmlinux.lds 链接脚本文件源码分析》 …

鸿蒙开发入门day19-使用NDK接口构建UI(一)

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;还请三连支持一波哇ヾ(&#xff20;^∇^&#xff20;)ノ&#xff09; 目录 NDK接口概述 整体架构 开发流程 接入ArkTS页面 占位组件 NDK组…

unity3d入门教程六

unity3d入门教程六 15.1预制体15.2编辑预制体15.3在场景中编辑15.4动态创建实例15.5实例的销毁16.1&#xff08;练习&#xff09;子弹发射16.2定时器16.3键盘事件 15.1预制体 火神山10天建成&#xff0c;使用了预制体技术 一个个小房间都是事先建造好的&#xff0c;最后吊车装…

观众登记2025中国(深圳)国际智能手机供应链展览会

时间&#xff1a;2024年4月9-11日 地点&#xff1a;深圳会展中心 ◆展会背景background&#xff1a; 近年来&#xff0c;国内手机品牌在全球市场上的影响力不断增强&#xff0c;华为、OPPO、VIVO和小米等…

ICPC网络赛 以及ACM训练总结

一、训练反思 关于我自己暑假期间训练的反思&#xff0c;我承认无论是因为什么原因&#xff0c;我自己浪费我整整一个暑假的时间&#xff0c;暑假期间正是我们集训的关键时期&#xff0c;这期间没有任何的事情来打扰我们学习&#xff0c;而我却熬夜&#xff0c;白天训练懈怠&a…

在服务器上开Juypter Lab教程(远程访问)

在服务器上开Juypter Lab教程&#xff08;远程访问&#xff09; 文章目录 在服务器上开Juypter Lab教程&#xff08;远程访问&#xff09;一、安装anaconda1、安装anaconda2、提权限3、运行4、同意协议5、安装6、是否要自动初始化 conda7、结束8、检查 二、Anaconda安装Pytorch…

python 自动化测试接口

比如我们要测试接口&#xff1a;identity/chatRecords/pages 已在Postman中有&#xff0c;那我们就可以直接从里面复制出Python脚本 新建&#xff1a; pagerequest.py import requests import jsonurl "http://192.168.31.132:70/identity/chatRecords/pages"payl…

下载MySQL Connector/c

MySQL :: Download MySQL Connector/C (Archived Versions) 其他语言&#xff1a; MySQL :: MySQL Product Archives

基于AgentUniverse在金融场景中的多智能体应用探索

基于AgentUniverse在金融场景中的多智能体应用探索 1.基于大模型智能体超级状态机 智能体、多智能体都是当下的技术热点,但作为一个技术人应该理解,所有的技术都有自己所针对的问题、及其能力边界,并不存在普适的、放诸业务场景皆 work 的技术方案。在这里尝试区分,从大模…

[数据集][目标检测]高铁受电弓检测数据集VOC+YOLO格式1245张2类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;1245 标注数量(xml文件个数)&#xff1a;1245 标注数量(txt文件个数)&#xff1a;1245 标注…

2024年华为9月4日秋招笔试真题题解

2024年华为0904秋招笔试真题 二叉树消消乐好友推荐系统维修工力扣上类似的题--K站中转内最便宜的航班 二叉树消消乐 题目描述 给定原始二叉树和参照二叉树(输入的二叉树均为满二叉树&#xff0c;二叉树节点的值范围为[1,1000]&#xff0c;二叉树的深度不超过1000)&#xff0c…

线性表之单链表

在上一节我们学习了线性表中的顺序表&#xff0c;今天我们来学习一下线性表中的另一种结构——单链表 前言 我们在之前已经初步了解了数据结构中的两种逻辑结构&#xff0c;但线性结构中并非只有顺序表一种&#xff0c;它还有不少兄弟姐妹&#xff0c;今天我们再来学习一下单链…

Python基础语法(3)下

列表和元组 列表是什么&#xff0c;元组是什么 编程中&#xff0c;经常需要使用变量&#xff0c;来保存/表示数据。变量就是内存空间&#xff0c;用来表示或者存储数据。 如果代码中需要表示的数据个数比较少&#xff0c;我们直接创建多个变量即可。 num1 10 num2 20 num3…

[数据集][目标检测]葡萄成熟度检测数据集VOC+YOLO格式1123张3类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;1123 标注数量(xml文件个数)&#xff1a;1123 标注数量(txt文件个数)&#xff1a;1123 标注…

【重学 MySQL】二十九、函数的理解

【重学 MySQL】二十九、函数的理解 什么是函数不同 DBMS 函数的差异函数名称和参数功能实现数据类型支持性能和优化兼容性和可移植性 MySQL 的内置函数及分类单行函数多行函数&#xff08;聚合函数&#xff09;使用注意事项 什么是函数 函数&#xff08;Function&#xff09;在…

系统架构设计师 需求分析篇二

&#x1f4d8; 面向对象分析方法 1. 用例模型 &#x1f4c8; 构建用例模型一般需要经历 4 个阶段&#xff1a; 识别参与者 &#x1f50d;&#xff1a;识别与系统交互的所有事物。合并需求获得用例 &#x1f517;&#xff1a;将需求分配给予其相关的参与者。细化用例描述 &am…