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>
后言
创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力
相关文章:
CSS3媒体查询实现不同宽度的下不同内容的展示
文章目录 前言CSS3 多媒体查询实例520 到 699px 宽度 - 添加邮箱图标700 到 1000px - 添加文本前缀信息大于 1001px 宽度 - 添加邮件地址大于 1151px 宽度 - 添加图标代码后言 前言 hello world欢迎来到前端的新世界 😜当前文章系列专栏:CSS ὃ…...
使用 STM32 读取和解析 NTC 热敏电阻的数值
本文介绍了如何利用 STM32 微控制器读取和解析 NTC(Negative Temperature Coefficient)热敏电阻的数值。首先,我们将简要介绍 NTC 热敏电阻的原理和特性。接下来,我们将详细讨论如何设计电路连接和采用合适的 STM32 外设进行数值读…...
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 …...
力扣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…...
【statsmodels】快速实现回归预测
python 做线性回归分析有好几种方式,常要的是 scipy 包,statsmodels 包,以及 sklearn包。 但是个人比较喜欢使用statsmodel进行线性回归,一是其可以更好的呈现回归效果,二是其能够自动跳过缺失值。 sklearn则不能方便…...
Kubernetes异常排查方式
集群信息: 1. 显示 Kubernetes 版本:kubectl version 2. 显示集群信息:kubectl cluster-info 3. 列出集群中的所有节点:kubectl get nodes 4. 查看一个具体的节点详情:kubectl describe node <node-name> 5. 列…...
【Linux】:信号的产生
信号 一.前台进程和后台进程1.前台进程2。后台进程3.总结 二.自定义信号动作接口三.信号的产生1.键盘组合键2.kill信号进程pid3.系统调用1.kill函数2.raise函数3.abort函数 四.异常五.软件条件六.通过终端按键产生信号 一.前台进程和后台进程 1.前台进程 一个简单的代码演示 …...
document load 和 document ready 的区别
"document load" 和 "document ready" 都是 JavaScript 中用于处理文档加载事件的术语,但是它们之间有一些重要的区别。 document load 在传统的 JavaScript 中,document.load 事件是当整个 HTML 文档完全加载并出现在浏览器中时触…...
flutter与原生Android通信方式之MethodChannel
闲来无事,flutter好久没看了,上次折腾flutter与Android通信没折腾完,有些事情耽搁了,这次继续 演示效果: flutter与Android原生通信 flutter端 import package:flutter/cupertino.dart; import package:flutter/mater…...
[PyTorch][chapter 66][强化学习-值函数近似]
前言 现实强化学习任务面临的状态空间往往是连续的,无穷多个。 这里主要针对这种连续的状态空间处理。后面DQN 也是这种处理思路。 目录: 1: 原理 2: 梯度更新 3: target 和 预测值 4 流程 一 原理 强化学习最重要的是得到 …...
hdlbits系列verilog解答(Exams/m2014 q4e)-46
文章目录 一、问题描述二、verilog源码三、仿真结果 一、问题描述 实现以下电路: 二、verilog源码 module top_module (input in1,input in2,output out);assign out ~(in1 | in2);endmodule三、仿真结果 转载请注明出处!...
小程序如何实现下拉刷新?
一、全局下拉刷新 在app.json的window节点中,将enablePullDownRefresh设置为true; onPullDownRefresh: function () {console.log(下拉刷新);// 在这里编写数据更新的逻辑wx.stopPullDownRefresh(); // 数据更新完成后,调用该方法停止刷新}二…...
二进制数据转换成十六进制表示 binascii.hexlify()
【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 二进制数据转换成十六进制表示 binascii.hexlify() 选择题 binascii.hexlify()参数的数据类型可以是? import binascii number 11 byte_data number.to_bytes() hex_data bin…...
苍穹外卖--店铺营业状态设置
需求分析和设计 1.1.1 产品原型 进到苍穹外卖后台,显示餐厅的营业状态,营业状态分为营业中和打烊中,若当前餐厅处于营业状态,自动接收任何订单,客户可在小程序进行下单操作;若当前餐厅处于打烊状态&#…...
2023金盾杯线上赛-AGRT战队-WP
目录 WEB ApeCoin get_source ezupload easyphp MISC 来都来了 芙宁娜 Honor Crypto 我看看谁还不会RSA hakiehs babyrsa PWN sign-format RE Re1 WEB ApeCoin 扫描发现有源码泄露,访问www.tar.gz得到源码。 在源码中发现了冰蝎马。 Md5解码&am…...
Python面向对象编程——类方法、实例方法和静态方法总结
在Python面向对象编程中,类方法(class methods)、实例方法(instance methods)和静态方法(static methods)是不同类型的方法,它们有一些联系,但也存在一些明显的区别。 类…...
HarmonyOS开发(五):常用基础组件
1、组件介绍 组件(Component),是界面搭建及显示的最小单元。 组件根据功能可以分为五大类:基础组件、容器组件、媒体组件、绘制组件、画布组件 2、基础组件 基础组件是视图层的基本组成单元,它包含:Text、Image、T…...
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…...
c++ 重写 多态
1 重写(继承后(拼接基类后)) 1.1 非虚函数 同名成员函数 (各自有一个xFunction() 内存 ) #include <iostream> #include <String> class BaseClass { public:void xFunction() {std::cout << "BaseClass::xFunction()\n"; } };class Subclass1 …...
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"如果出现以下错误,解决方案如下: 错误案例&am…...
突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合
强化学习(Reinforcement Learning, RL)是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程,然后使用强化学习的Actor-Critic机制(中文译作“知行互动”机制),逐步迭代求解…...
基于Flask实现的医疗保险欺诈识别监测模型
基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施,由雇主和个人按一定比例缴纳保险费,建立社会医疗保险基金,支付雇员医疗费用的一种医疗保险制度, 它是促进社会文明和进步的…...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行,YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID: YW3…...
JS设计模式(4):观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中,我们经常会遇到这样的场景:一个对象的状态变化需要自动通知其他对象,比如: 电商平台中,商品库存变化时需要通知所有订阅该商品的用户;新闻网站中࿰…...
纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join
纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...
RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)
RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发,后来由Pivotal Software Inc.(现为VMware子公司)接管。RabbitMQ 是一个开源的消息代理和队列服务器,用 Erlang 语言编写。广泛应用于各种分布…...
mac 安装homebrew (nvm 及git)
mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用: 方法一:使用 Homebrew 安装 Git(推荐) 步骤如下:打开终端(Terminal.app) 1.安装 Homebrew…...
通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器
拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件: 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...
Python 高效图像帧提取与视频编码:实战指南
Python 高效图像帧提取与视频编码:实战指南 在音视频处理领域,图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库(如 OpenCV、FFmpeg、PyAV),可以高效处理视频流,实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程,提高处理…...
第一篇:Liunx环境下搭建PaddlePaddle 3.0基础环境(Liunx Centos8.5安装Python3.10+pip3.10)
第一篇:Liunx环境下搭建PaddlePaddle 3.0基础环境(Liunx Centos8.5安装Python3.10pip3.10) 一:前言二:安装编译依赖二:安装Python3.10三:安装PIP3.10四:安装Paddlepaddle基础框架4.1…...
