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

CSS3媒体查询实现不同宽度的下不同内容的展示

news 2026/2/9 23:30:09

文章目录

  • 前言
  • CSS3 多媒体查询实例
  • 520 到 699px 宽度 - 添加邮箱图标
  • 700 到 1000px - 添加文本前缀信息
  • 大于 1001px 宽度 - 添加邮件地址
  • 大于 1151px 宽度 - 添加图标
  • 代码
  • 后言

前言

hello world欢迎来到前端的新世界

😜当前文章系列专栏：CSS
🐱‍👓博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)🌹
💖感谢大家支持！您的观看就是作者创作的动力

CSS3 多媒体查询实例

本章节我们将为大家演示一些多媒体查询实例。

开始之前我们先制作一个电子邮箱的链接列表。HTML 代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
ul {list-style-type: none;
}ul li a {color: green;text-decoration: none;padding: 3px;display: block;
}
</style>
</head>
<body><ul><li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li ><li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li ><li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a>< /li>
</ul></body>
</html>

注意 data-email 属性。在 HTML 中我们可以使用带 data- 前缀的属性来存储信息。

520 到 699px 宽度 - 添加邮箱图标

当浏览器的宽度在 520 到 699px, 邮箱链接前添加邮件图标：

@media screen and (max-width: 699px) and (min-width: 520px) {ul li a {padding-left: 30px;background: url(email-icon.png) left center no-repeat;}
}

700 到 1000px - 添加文本前缀信息

当浏览器的宽度在 700 到 1000px, 会在邮箱链接前添加 "Email: ":

@media screen and (max-width: 1000px) and (min-width: 700px) {ul li a:before {content: "Email: ";font-style: italic;color: #666666;}
}

大于 1001px 宽度 - 添加邮件地址

当浏览器的宽度大于 1001px 时，会在链接后添加邮件地址接。

我们会使用 data- 属性来为每个人名后添加邮件地址：

@media screen and (min-width: 1001px) {ul li a:after {content: " (" attr(data-email) ")";font-size: 12px;font-style: italic;color: #666666;}
}

大于 1151px 宽度 - 添加图标

当浏览器的宽度大于 1001px 时，会在人名前添加图标。

实例中，我们没有编写额外的查询块，我们可以在已有的查询媒体后使用逗号分隔来添加其他媒体查询 (类似 OR 操作符):

@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {ul li a {padding-left: 30px;background: url(email-icon.png) left center no-repeat;}
}

代码

<!DOCTYPE html>
<html><head><style>ul {list-style-type: none;}ul li a {color: green;text-decoration: none;padding: 3px;display: block;}@media screen and (max-width: 699px) and (min-width: 520px) {ul li a {padding-left: 30px;background: url(email-icon.png) left center no-repeat;}}@media screen and (max-width: 1000px) and (min-width: 700px) {ul li a:before {content: "Email: ";font-style: italic;color: #666666;}}@media screen and (min-width: 1001px) {ul li a:after {content: " (" attr(data-email) ")";font-size: 12px;font-style: italic;color: #666666;}}@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {ul li a {padding-left: 30px;background: url(email-icon.png) left center no-repeat;}}</style>
</head><body><ul><li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>3<li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li><li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li></ul></body></html>

后言

创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力

相关文章：

CSS3媒体查询实现不同宽度的下不同内容的展示

文章目录 前言CSS3 多媒体查询实例520 到 699px 宽度 - 添加邮箱图标700 到 1000px - 添加文本前缀信息大于 1001px 宽度 - 添加邮件地址大于 1151px 宽度 - 添加图标代码后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;CSS &#x1f43…...

编程日记 2023/11/26 8:48:24

使用 STM32 读取和解析 NTC 热敏电阻的数值

本文介绍了如何利用 STM32 微控制器读取和解析 NTC&#xff08;Negative Temperature Coefficient&#xff09;热敏电阻的数值。首先&#xff0c;我们将简要介绍 NTC 热敏电阻的原理和特性。接下来&#xff0c;我们将详细讨论如何设计电路连接和采用合适的 STM32 外设进行数值读…...

编程日记 2023/11/26 8:47:23

C#，数值计算——有理函数插值和外推（Rational_interp）的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { /// <summary> /// 有理函数插值和外推 /// Rational Function Interpolation and Extrapolation /// Given a value x, and using pointers to data xx and yy, this routine returns …...

编程日记 2023/11/26 8:45:22

力扣283:移动零(JAVA)

题目描述: 意思是将所有0移到最后的同时其余非0元素位置仍然不变 如 1 2 0 5 2 0 经过移动零后变为 1 2 5 2 0 0 思路:使用双指针的思路来写 fast:从左往右遍历数组 slow:非零元素最后的一个位置 将数组分为3个区间 [0,slow]为处理好的非0数据,slow永远指向最后一个非0数据 [s…...

编程日记 2023/11/26 8:43:20

【statsmodels】快速实现回归预测

python 做线性回归分析有好几种方式&#xff0c;常要的是 scipy 包&#xff0c;statsmodels 包&#xff0c;以及 sklearn包。 但是个人比较喜欢使用statsmodel进行线性回归&#xff0c;一是其可以更好的呈现回归效果&#xff0c;二是其能够自动跳过缺失值。 sklearn则不能方便…...

编程日记 2023/11/26 8:42:19

Kubernetes异常排查方式

集群信息&#xff1a; 1. 显示 Kubernetes 版本&#xff1a;kubectl version 2. 显示集群信息&#xff1a;kubectl cluster-info 3. 列出集群中的所有节点&#xff1a;kubectl get nodes 4. 查看一个具体的节点详情&#xff1a;kubectl describe node <node-name> 5. 列…...

编程日记 2023/11/26 8:41:18

【Linux】：信号的产生

信号 一.前台进程和后台进程1.前台进程2。后台进程3.总结 二.自定义信号动作接口三.信号的产生1.键盘组合键2.kill信号进程pid3.系统调用1.kill函数2.raise函数3.abort函数 四.异常五.软件条件六.通过终端按键产生信号 一.前台进程和后台进程 1.前台进程 一个简单的代码演示 …...

编程日记 2023/11/26 8:40:17

document load 和 document ready 的区别

"document load" 和 "document ready" 都是 JavaScript 中用于处理文档加载事件的术语&#xff0c;但是它们之间有一些重要的区别。 document load 在传统的 JavaScript 中&#xff0c;document.load 事件是当整个 HTML 文档完全加载并出现在浏览器中时触…...

编程日记 2023/11/26 8:39:16

flutter与原生Android通信方式之MethodChannel

闲来无事&#xff0c;flutter好久没看了&#xff0c;上次折腾flutter与Android通信没折腾完&#xff0c;有些事情耽搁了&#xff0c;这次继续 演示效果&#xff1a; flutter与Android原生通信 flutter端 import package:flutter/cupertino.dart; import package:flutter/mater…...

编程日记 2023/11/26 8:37:14

[PyTorch][chapter 66][强化学习-值函数近似]

前言 现实强化学习任务面临的状态空间往往是连续的,无穷多个。 这里主要针对这种连续的状态空间处理。后面DQN 也是这种处理思路。 目录&#xff1a; 1&#xff1a; 原理 2&#xff1a; 梯度更新 3&#xff1a; target 和 预测值 4 流程 一 原理 强化学习最重要的是得到 …...

编程日记 2023/11/26 8:36:13

hdlbits系列verilog解答（Exams/m2014 q4e）-46

文章目录 一、问题描述二、verilog源码三、仿真结果 一、问题描述 实现以下电路&#xff1a; 二、verilog源码 module top_module (input in1,input in2,output out);assign out ~(in1 | in2);endmodule三、仿真结果 转载请注明出处&#xff01;...

编程日记 2023/11/26 8:35:12

小程序如何实现下拉刷新？

一、全局下拉刷新 在app.json的window节点中&#xff0c;将enablePullDownRefresh设置为true&#xff1b; onPullDownRefresh: function () {console.log(下拉刷新);// 在这里编写数据更新的逻辑wx.stopPullDownRefresh(); // 数据更新完成后&#xff0c;调用该方法停止刷新}二…...

编程日记 2023/11/26 8:34:11

二进制数据转换成十六进制表示 binascii.hexlify()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 二进制数据转换成十六进制表示 binascii.hexlify() 选择题 binascii.hexlify()参数的数据类型可以是&#xff1f; import binascii number 11 byte_data number.to_bytes() hex_data bin…...

编程日记 2023/11/26 8:31:08

苍穹外卖--店铺营业状态设置

需求分析和设计 1.1.1 产品原型 进到苍穹外卖后台&#xff0c;显示餐厅的营业状态&#xff0c;营业状态分为营业中和打烊中&#xff0c;若当前餐厅处于营业状态&#xff0c;自动接收任何订单&#xff0c;客户可在小程序进行下单操作&#xff1b;若当前餐厅处于打烊状态&#…...

编程日记 2023/11/26 8:30:07

2023金盾杯线上赛-AGRT战队-WP

目录 WEB ApeCoin get_source ezupload easyphp MISC 来都来了 芙宁娜 Honor Crypto 我看看谁还不会RSA hakiehs babyrsa PWN sign-format RE Re1 WEB ApeCoin 扫描发现有源码泄露&#xff0c;访问www.tar.gz得到源码。 在源码中发现了冰蝎马。 Md5解码&am…...

编程日记 2023/11/26 8:29:05

Python面向对象编程——类方法、实例方法和静态方法总结

在Python面向对象编程中&#xff0c;类方法&#xff08;class methods&#xff09;、实例方法&#xff08;instance methods&#xff09;和静态方法&#xff08;static methods&#xff09;是不同类型的方法&#xff0c;它们有一些联系&#xff0c;但也存在一些明显的区别。 类…...

编程日记 2023/11/26 8:28:04

HarmonyOS开发(五)：常用基础组件

1、组件介绍 组件&#xff08;Component&#xff09;,是界面搭建及显示的最小单元。 组件根据功能可以分为五大类&#xff1a;基础组件、容器组件、媒体组件、绘制组件、画布组件 2、基础组件 基础组件是视图层的基本组成单元&#xff0c;它包含&#xff1a;Text、Image、T…...

编程日记 2023/11/26 8:27:03

Hive中常出现的错误(不定时更新)

1.加载数据失败 hive> load data local inpath /home/user/hive.txt into table studentl> ; FAILED: SemanticException [Error 10001]: Line 1:56 Table not found studentl hive> load data local inpath /home/user/hive.txt into table student; Loading data to…...

编程日记 2023/11/26 8:26:02

c++ 重写 多态

1 重写(继承后(拼接基类后)) 1.1 非虚函数 同名成员函数 (各自有一个xFunction() 内存 ) #include <iostream> #include <String> class BaseClass { public:void xFunction() {std::cout << "BaseClass::xFunction()\n"; } };class Subclass1 …...

编程日记 2023/11/26 8:24:00

Git如何修改提交(commit)用户名称(user.name)和邮箱（user.email）

Git用户名 Git查看用户名 git config user.name修改Git提交用户名 修改全局Git用户名 git config --global user.name "xx" 修改当前服务/项目Git用户名 git config user.name "xx"如果出现以下错误&#xff0c;解决方案如下&#xff1a; 错误案例&am…...

编程日记 2023/11/26 8:22:59

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...

编程新知 2025/11/5 4:10:42

Python爬虫实战：研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...

编程新知 2025/8/18 9:54:31

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

编程新知 2026/2/4 15:29:40

网络编程（UDP编程）

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

编程新知 2026/2/4 17:31:44

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...

编程新知 2025/10/14 0:47:25

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

编程新知 2025/6/11 3:20:47

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...

编程新知 2026/2/9 9:22:40

ui框架-文件列表展示

ui框架-文件列表展示 介绍 UI框架的文件列表展示组件&#xff0c;可以展示文件夹&#xff0c;支持列表展示和图标展示模式。组件提供了丰富的功能和可配置选项&#xff0c;适用于文件管理、文件上传等场景。 功能特性 支持列表模式和网格模式的切换展示支持文件和文件夹的层…...

编程新知 2026/2/4 17:34:02

Vue3中的computer和watch

computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...

编程新知 2025/11/8 20:34:42

GB/T 43887-2024 核级柔性石墨板材检测

核级柔性石墨板材是指以可膨胀石墨为原料、未经改性和增强、用于核工业的核级柔性石墨板材。 GB/T 43887-2024核级柔性石墨板材检测检测指标&#xff1a; 测试项目 测试标准 外观 GB/T 43887 尺寸偏差 GB/T 43887 化学成分 GB/T 43887 密度偏差 GB/T 43887 拉伸强度…...

编程新知 2025/10/1 7:37:59