前端 响应式设计之媒体查询

        媒体查询(Media Queries)是用于在网页设计中根据用户设备的特征(如屏幕宽度、高度、设备类型等)来应用不同的样式表规则的技术。它允许开发者根据用户设备的特性动态调整网页的布局和样式,以提供更好的用户体验。

媒体查询组成

  1. 媒体类型 —— Media types
  2. 媒体特性 —— Media features
  3. 逻辑运算符 —— Logical operators

mediatype(媒体类型):指定CSS样式应用的设备或媒体类型。常见的媒体类型包括:

  • all:所有设备
  • print:打印预览模式
  • screen:屏幕设备
  • speech:语音合成器

media feature(媒体特性):指定CSS样式根据设备或环境的不同特性而应用或不应用。媒体特性必须用小括号括起来,并且包含一个或多个表达式,例如设备的宽度或高度。常见的媒体特性包括:

  • width:视口或设备的宽度
  • height:视口或设备的高度
  • orientation:设备方向(横向或纵向)
  • aspect-ratio:视口或设备的宽高比
  • device-width and device-height:这两个特性用于描述设备的物理尺寸
  • resolution:描述设备的分辨率

logical operators(逻辑运算符):使用的逻辑操作符包括 andnotonly,它们允许开发者根据多个条件来定义 CSS 样式的应用规则。

  • and 操作符:用于组合多个媒体特性,要求同时满足所有条件时才应用样式
  • not 操作符:用于指定一个不满足某个媒体特性时应用样式
  • only 操作符:用于避免老旧浏览器不支持媒体查询时的问题

媒体查询使用

  1. <link> 标签中引用不同的样式表: 在 HTML 中使用 <link> 标签的 media 属性来加载不同的 CSS 样式表,以响应不同的设备或条件。例如:
    <!-- 默认样式表 -->
    <link rel="stylesheet" href="styles.css"><!-- 当视口宽度小于等于 600px 时应用的样式表 -->
    <link rel="stylesheet" media="screen and (max-width: 600px)" href="styles-mobile.css"><!-- 当视口宽度大于 600px 时应用的样式表 -->
    <link rel="stylesheet" media="screen and (min-width: 601px)" href="styles-desktop.css">
    
  2. 在 CSS中使用媒体查询: 在单个 HTML 文件内部使用 <style> 标签时/在外部的 CSS 文件中/使用像 Sass、Less 等 CSS 预处理器时,通过媒体查询条件来定义不同的 CSS 规则。例如:
    <style>@media screen and (max-width: 600px) {/* CSS rules for mobile devices */body {font-size: 14px;}}@media screen and (min-width: 601px) {/* CSS rules for desktop devices */body {font-size: 16px;}}
    </style>
    

具体示例

        基本语法

@media 媒体类型 and (媒体特性) {/* CSS规则 */
}

       根据屏幕宽度调整样式

/* 当屏幕宽度小于或等于 600px 时应用这些样式 */
@media screen and (max-width: 600px) {body {font-size: 14px;}
}

      针对打印设备的样式

/* 在打印设备上隐藏某些元素 */
@media print {.hide-on-print {display: none;}
}

       多重条件的组合

/* 当屏幕宽度在 600px 到 900px 之间,且设备支持颜色显示时应用这些样式 */
@media screen and (min-width: 600px) and (max-width: 900px) and (min-color: 256) {body {background-color: lightblue;}
}

    and 操作符

@media (条件1) and (条件2) {/* CSS rules */
}@media (max-width: 600px) and (orientation: landscape) {/* CSS rules */
}

    not 操作符

@media not (条件) {/* CSS rules */
}@media not screen {/* CSS rules */
}

    only 操作符

@media only (条件) {/* CSS rules */
}@media only screen and (max-width: 600px) {/* CSS rules */
}

注意事项

  • 语法与结构:媒体查询必须以 @media 开头,后面跟着一个条件,如 screenprint 等,以及一个或多个媒体特性(如宽度、高度、颜色能力等)。

  • 顺序:CSS 中的媒体查询按照书写顺序进行匹配,因此通常建议从最宽泛的条件开始,逐步向下细化,确保样式按照预期生效。

  • 响应式设计:媒体查询是实现响应式设计(Responsive Web Design)的关键工具,能够帮助网页在各种设备上提供良好的视觉和功能体验。

  • 兼容性:大多数现代浏览器和设备都支持媒体查询,但在使用时仍需考虑到部分旧版浏览器的兼容性问题,可能需要提供备用样式或 JavaScript 解决方案。 

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

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

相关文章

阿里云PAI主机网页访问测试

笔者使用的阿里云平台PAI主机(首次使用免费三个月额度)&#xff0c;由于其默认不设置公网IP&#xff0c;所以在该主机上启动HTTP服务后无法访问测试。 这里使用ssh来作隧道穿透&#xff0c;首先需要配置ssh。 云主机配置ssh 1. 修改root账号密码 在云主机上执行 passwd ro…

安当透明加密(TDE)助力企业建立可信赖的数据环境

​​​​​​​ 透明加密是一种特殊的加密方法&#xff0c;它允许数据在存储或传输过程中自动进行加密和解密&#xff0c;而用户并不需要知道加密过程。这种技术对用户来说是“透明的”&#xff0c;因为它不会改变用户的日常操作习惯&#xff0c;加密和解密过程在后台自动进行…

怎么学习PMP才是最正确的?

每个人的学习方式各不相同&#xff0c;不能一概而论说某种学习方式就是错误的。学习方式并没有绝对的对错之分&#xff0c;只能说是否适合自己&#xff0c;是否能够达到预期的学习效果。并不是别人的学习方式就一定适合自己&#xff0c;也不是不适合自己的学习方式就一定是错误…

【ARMv8/v9 GIC 系列 4 -- GIC 中断分类 SGI | PPI | SPI 及中断检测流程】

文章目录 GIC 中断分类SGI&#xff08;Software Generated Interrupts&#xff09;PPI&#xff08;Per-Processor Interrupts&#xff09;SPI&#xff08;Shared Peripheral Interrupts&#xff09; 中断检测流程物理中断生命周期SPI 中断检测流程PPI 和SGI中断检测流程LPI中断…

分布式数据库的原理

分布式数据库 分布式数据库是将数据存储在多台独立计算机上&#xff0c;这些计算机通过网络连接协同工作的系统。其原理在于将数据分散到多个节点&#xff0c;以提高可用性、可扩展性和容错性。 CAP定理 CAP定理&#xff08;Consistency, Availability, Partition Tolerance…

Centos SFTP搭建

SFTP配置、连接及挂载教程_sftp连接-CSDN博客1、确认是否安装yum list installed | grep openssh-server 2、创建用户和组 sudo groupadd tksftpgroup sudo useradd -g tksftpgroup -d /home/www/tk_data -s /sbin/nologin tksftp01 sudo passwd tksftp013. 配置SFTP注意&a…

在Elasticsearch中添加字段

当使用Elasticsearch&#xff08;ES&#xff09;添加字段时&#xff0c;通常会涉及到更新已有索引的映射&#xff08;mapping&#xff09;&#xff0c;以确保新字段能够被正确地索引和搜索。下面是如何通过ES的API来更新索引映射并添加一个新字段的详细步骤&#xff1a; 1. 确认…

Unet已死,Transformer当立!详细解读基于DiT的开源视频生成大模型EasyAnimate

Diffusion Models视频生成-博客汇总 前言&#xff1a;最近阿里云PIA团队开源了基于Diffusion Transformer结构的视频生成模型EasyAnimate&#xff0c;并且提出了专门针对视频的slice VAE&#xff0c;对于目前基于Unet结构的视频生成最好如SVD形成了降维打击&#xff0c;不论是生…

Apifox 快速入门教程

访问示例项目​ 可访问Apifox官网&#xff0c;下载并打开 Apifox 后&#xff0c;你将会看到由系统自动创建的“示例团队”&#xff0c;其中内含一个“示例项目”。 项目中自动生成了与宠物商店有关的数条接口。 手动新建接口​ 新建接口是开发者们最常用的功能之一。Apifox 能…

提升运营设计水平的8个关键技巧

运营设计是建立更强大的设计团队&#xff0c;支持个人、流程和工具的协调&#xff0c;大规模扩大创造力和影响力的一种以人为本的方法。设计和操作通过敏捷和迭代的方法完全改变了开发过程&#xff0c;允许组织跨团队快速扩展和迭代设计过程。一个庞大的运营设计团队应该如何协…

斜堆(数据结构篇)

数据结构之斜堆 斜堆 概念&#xff1a; 斜堆是左式堆的自调节形式&#xff0c;斜堆和左式堆间的关系类似于伸展树和AVL树间的关系斜堆是具有堆序性的二叉树&#xff0c;但是不存在对树的结构限制不同于左式堆&#xff0c;关于任意节点的零路径长的任何信息都不保留&#xff…

Flask-cache

Flask-cache 目录 Flask-cache基本使用配置可用参数SimpleCacheNullCacheFileSystemCacheRedisCacheRedisSentinelCacheRedisClusterCacheMemcachedCacheSASLMemcachedCacheUWSGICache Flask-Cache是一个强大的缓存库&#xff0c;为基于Flask的应用提供了简单易用的API和多种缓…

嵌入式虚拟仿真创新教学方案,解决芯片原理讲解抽象、依赖大量硬件平台、系统化教学难三大难题

嵌入式技术起源早&#xff0c;市场需求旺盛&#xff0c;被广泛应用于各个领域&#xff0c;从智能家居到智慧城市&#xff0c;从工业自动化到医疗健康&#xff0c;嵌入式系统深度落地于各类智能设备与系统之中&#xff0c;支撑起物联网的发展。随着物联网与人工智能的迅速发展&a…

NGINX_十八 nginx 访问控制

十八 nginx 访问控制 1 nginx 访问控制模块 &#xff08;1&#xff09;基于IP的访问控制&#xff1a;http_access_module &#xff08;2&#xff09;基于用户的信任登录&#xff1a;http_auth_basic_module 2 基于IP的访问控制 2.1 配置语法 Syntax&#xff1a;allow addr…

《Windows API每日一练》5.2 按键消息

上一节中我们得知&#xff0c;Windows系统的按键消息有很多类型&#xff0c;大部分按键消息都是由Windows系统的默认窗口过程处理的&#xff0c;我们自己只需要处理少数几个按键消息。这一节我们将详细讲述Windows系统的所有按键消息及其处理方式。 本节必须掌握的知识点&…

解决IDEA使用卡顿的问题,设置JVM内存大小和清理缓存

解决IntelliJ IDEA中卡顿问题&#xff0c;可以尝试以下几个常见且有效的步骤&#xff1a; 1 增加IDEA的JVM内存分配&#xff1a; 位于IDEA安装目录的bin文件夹下&#xff0c;找到对应的操作系统配置文件&#xff08;idea64.exe.vmoptions&#xff08;Windows&#xff09;或id…

Nginx日志管理之日志分析

Nginx 通常被置于服务器访问的入口&#xff0c;其访问日志可以全局记录用户访问的来源、响应时间&#xff0c;以及用户行为热点等数据&#xff0c;通过对访问日志的分析&#xff0c;可以清晰地了解用户来源、用户行为习惯及自身服务器性能等情况。借助 ELK 的高性能处理能力&am…

软件编译出现fatal error: mpi.h: No such file or directory解决办法

软件编译时&#xff0c;如果出现fatal error: mpi.h: No such file or directory的问题时&#xff0c;很大可能是你的环境变量路径没有设置好&#xff0c;解决思路如下&#xff1a; export CPATH/opt/intel/impi/2019.0.117/intel64/include:$CPATH export LD_LIBRARY_PATH/o…

nodejs的express负载均衡(续)

之前写过一篇《nodejs的express负载均衡》&#xff0c;给出了两种方式实现express web服务的nlb。一种是利用nodejs自带的cluster&#xff0c;创建多个worker进程&#xff0c;绑定同一个服务端口&#xff0c;由主进程负责监听和调度&#xff1b;另一种启动多个nodejs实例&#…

BFS:FloodFill算法

文章目录 FloodFill算法简介1.图像渲染2.岛屿数量3.岛屿的最大面积4.被围绕的区域总结 FloodFill算法简介 Flood Fill算法是一种用于确定与某个给定节点相连的区域的算法&#xff0c;常用于计算机图形学和图像处理。该算法可以用于诸如填充多边形、检测连通区域等任务。Flood …