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

文章目录

  • 前言
  • 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>

后言

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

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

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

相关文章

什么是闭包和作用域链?

1. 什么是闭包 闭包指的是那些引用了另一个函数作用域中变量的函数&#xff0c;通常是在嵌套函数中实现的。 举个栗子&#xff0c;createCounter 接受一个参数 n&#xff0c;然后返回一个匿名函数&#xff0c;这个匿名函数是闭包&#xff0c;它可以访问外部函数 createCounte…

智能优化算法应用:基于鲸鱼算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于鲸鱼算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于鲸鱼算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.鲸鱼算法4.实验参数设定5.算法结果6.参考文献7.MATLAB…

Nginx常见的中间件漏洞

目录 1、Nginx文件名逻辑漏洞 2、Nginx解析漏洞 3、Nginx越权读取缓存漏洞 这里需要的漏洞环境可以看&#xff1a;Nginx 配置错误导致的漏洞-CSDN博客 1、Nginx文件名逻辑漏洞 该漏洞利用条件有两个&#xff1a; Nginx 0.8.41 ~ 1.4.3 / 1.5.0 ~ 1.5.7 php-fpm.conf中的s…

基于单片机的温湿度检测系统设计

目录 摘 要... 2 第一章 绪论... 5 1.1 研究课题背景... 5 1.2 国内外发展概况... 7 1.3 课题研究的目的... 8 1.4 课题的研究内容及章节安排... 8 第二章 温湿度检测系统控制系统的设计方案... 10 2.1 设计任务及要求... 10 2.2 温湿度检测系统总体设计方…

百度 Comate 终于支持 IntelliJ IDEA 了

大家好&#xff0c;我是伍六七。 对于一直关注 AI 编程的阿七来说&#xff0c;编程助手绝对是必不可少的&#xff0c;除了 GitHub Copilot 之外&#xff0c;国内百度的 Comate 一直是我关注的重点。 但是之前&#xff0c;Comate 还支持 VS code&#xff0c;并不支持 IntelliJ…

mybatis的使用,mybatis的实现原理,mybatis的优缺点,MyBatis缓存,MyBatis运行的原理,MyBatis的编写方式

文章目录 MyBatis简介结构图Mybatis缓存&#xff08;一级缓存、二级缓存&#xff09;MyBatis是什么&#xff1f;mybatis的实现原理JDBC编程有哪些不足之处&#xff0c;MyBatis是如何解决这些问题的&#xff1f;Mybatis优缺点优点缺点映射关系 MyBatis的解析和运行原理MyBatis的…

【单片机学习笔记】STC8H1K08参考手册学习笔记

STC8H1K08参考手册学习笔记 STC8H系列芯片STC8H1K08开发环境串口烧录 STC8H系列芯片 STC8H 系列单片机是不需要外部晶振和外部复位的单片机&#xff0c;是以超强抗干扰/超低价/高速/低功耗为目标的 8051 单片机,在相同的工作频率下,STC8H 系列单片机比传统的 8051约快12 倍速度…

数组题目:645. 错误的集合、 697. 数组的度、 448. 找到所有数组中消失的数字、442. 数组中重复的数据 、41. 缺失的第一个正数

645. 错误的集合 思路&#xff1a; 我们定义一个数组cnt&#xff0c;记录每个数出现的次数。然后我们遍历数组&#xff0c;从1开始&#xff0c;如果cnt[i] 0 那就说明这个是错误的数&#xff0c;如果 cnt[i] 2&#xff0c;那就说明是重复的数。 代码&#xff1a; class So…

RabbitMQ之消费者可靠性

文章目录 前言一、消费者确认机制二、失败重试机制三、失败处理策略四、业务幂等性唯一消息ID业务判断 五、兜底方案总结 前言 当RabbitMQ向消费者投递消息以后&#xff0c;需要知道消费者的处理状态如何。因为消息投递给消费者并不代表就一定被正确消费了&#xff0c;可能出现…

WSL开发环境配置指南

WSL开发环境配置指南 WSL 安装 Ubuntu20.04 wsl --list --online 查看能够使用的linux发行版wsl --install Ubuntu-20.04 安装Ubuntu2004发行版wsl --shutdown Ubuntu-20.04 关闭Ubuntu2004发行版wsl --export Ubuntu-20.04 W:\Linux\Ubuntu\Ubuntu-20.04\Ubuntu2004.tar 将Ubu…

3DMAX平滑布尔插件超级布尔工具使用教程

3dMax平滑布尔插件SmoothBoolean用于在ProBoolean网格之间创建平滑过渡的3dMax插件。再也不需要花几个小时来清理用布尔切割创建的混乱拓扑了。如果你只是想让你的三维模型在渲染图上看起来很棒&#xff0c;或者你需要为游戏烘焙一些东西&#xff0c;那么你就不必浪费时间来建模…

【Java数据结构 -- 时间和空间复杂度】

时间和空间复杂度 1. 算法效率2. 时间复杂度2.1 时间复杂度的概念2.2 大O的渐进表示法2.3 推导大O阶方法2.4 常见时间复杂度计算举例例1例2例3例4 计算 bubbleSort的时间复杂度例5 计算binarySearch的时间复杂度&#xff1f;例6 计算阶乘递归factorial的时间复杂度&#xff1f;…

Kotlin学习——kt中的类,数据类 枚举类 密封类,以及对象

Kotlin 是一门现代但已成熟的编程语言&#xff0c;旨在让开发人员更幸福快乐。 它简洁、安全、可与 Java 及其他语言互操作&#xff0c;并提供了多种方式在多个平台间复用代码&#xff0c;以实现高效编程。 https://play.kotlinlang.org/byExample/01_introduction/02_Functio…

个人硬件测试用例入门设计

&#x1f4d1;打牌 &#xff1a; da pai ge的个人主页 &#x1f324;️个人专栏 &#xff1a; da pai ge的博客专栏 ☁️宝剑锋从磨砺出&#xff0c;梅花香自苦寒来 &#x1f324;️功能测试 进行新增、…

Java中绕过SSL/TLS验证:开发与风险透视

警告: 本文提供的方法绕过SSL/TLS证书验证&#xff0c;这在某些开发场景下可能是有用的&#xff0c;但使用这些方法会导致严重的安全隐患。在生产环境中&#xff0c;你应该始终验证SSL/TLS证书以确保数据的安全传输。 引言 在日常的软件开发中&#xff0c;我们经常需要与其他服…

3.红色和紫色-【第六届传智杯程序设计挑战赛解题分析详解复盘】(JavaPythonC++实现)

🚀 欢迎来到 ACM 算法题库专栏 🚀 在ACM算法题库专栏,热情推崇算法之美,精心整理了各类比赛题目的详细解法,包括但不限于ICPC、CCPC、蓝桥杯、LeetCode周赛、传智杯等等。无论您是刚刚踏入算法领域,还是经验丰富的竞赛选手,这里都是提升技能和知识的理想之地。 ✨ 经典…

FFmpeg命令分隔视频

有一个视频如a.mp4&#xff0c;此视频采用帧率为30生成&#xff0c;共有299帧&#xff0c;这里通过FFmpeg命令分隔成1秒一个个的小视频&#xff0c;即每个小视频帧数为30帧。 用到的FFmpeg参数如下所示&#xff1a; (1).-i:指定输入视频文件的名称&#xff1b; (2).-c:指…

第四题-abb 【第六届传智杯程序设计挑战赛解题分析详解复盘】(JavaPythonC++实现)

🚀 欢迎来到 ACM 算法题库专栏 🚀 在ACM算法题库专栏,热情推崇算法之美,精心整理了各类比赛题目的详细解法,包括但不限于ICPC、CCPC、蓝桥杯、LeetCode周赛、传智杯等等。无论您是刚刚踏入算法领域,还是经验丰富的竞赛选手,这里都是提升技能和知识的理想之地。 ✨ 经典…

name 属性:提高 Vue 应用可维护性的关键

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

对称加密与非对称加密的区别是什么?

对称加密与非对称加密的区别是什么&#xff1f; 对称加密概念&#xff1a;好处和坏处&#xff1a;基本原理 非对称加密概念&#xff1a;工作原理&#xff1a; 两者区别安全性处理速度密钥管理通信双方数量 对称加密 概念&#xff1a; 同一个密钥可以同时用来对信息进行加密和…