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

CSS3_媒体查询（十一）

news 来源：原创 2025/7/27 21:14:12

CSS3_响应式布局

1、媒体样式

在不同媒体上显示不同的样式。

常用阈值：

小于768px：小屏幕；
768px-992px：中等屏幕；
992px-1200px：大屏幕；
大于1200px：超大屏幕。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>查询媒体类型</title><style>h1 {width: 300px;height: 300px;line-height: 300px;background-image: linear-gradient(30deg, red, yellow, green);margin: 0 auto;text-align: center;font-size: 30px;color: white;text-shadow: 0 0 10px black;}/* 只有在打印机上才应用的样式 */@media print {h1 {background: transparent;}}/* 只有在屏幕上才应用的样式 */@media screen {h1 {font-family: "Forte";}}/* 在所有情况下都使用的字体 */@media all {h1 {font-family: "Forte";}}</style>
</head><body><h1>测试文本</h1>
</body></html>

2、媒体特性

根据媒体视口的大小和媒体宽度进行样式的变化。

width：检测视口宽度；
max-width：检测视口最大宽度；
min-width：检测视口最小宽度；
height：检测视口高度;
max-height：检测视口最大高度；
min-height：检测视口最小宽度；
device-width：检测屏幕的宽度；
max-device-width：检测屏幕的最大宽度；
min-device-width：检测屏幕的最小宽度；
orientation：检测视口的旋转方向
portrait：视口处于纵向，高度大于宽度；
landscape：视口处于横向，宽度大于高度。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>媒体类型</title><style>div {background-color: aqua;height: 200px;line-height: 200px;text-align: center;font-size: 50px;}/* 视口宽度小于700px的时候背景设置为黄色 */@media (max-width:700px) {div {background-color: yellow;}}/* 视口宽度大于900px的时候背景设置为蓝色 */@media (min-width:900px) {div {background-color: blue;}}/* 视口宽度为500px的时候背景设置为红色 */@media (width:500px) {div {background-color: red;}}/* 只有设备宽度为2560px(因为2560缩放了1.25倍)时,才会生效 */@media (device-width:2048px) {div {background-color: black;}}</style>
</head><body><div><p>示例文本</p></div>
</body></html>

3、运算符

可以通过运算符将媒体特性联系在一起：

and：并且；
, 或者 or：或；
not：否定；
only：肯定。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>运算符</title><style>div {height: 300px;background-color: antiquewhite;}@media (min-width:600px) and (max-width:800px) {div {background-color: aqua;}}</style>
</head><body><div></div>
</body></html>

CSS3_媒体查询（十一）

CSS3_响应式布局 1、媒体样式在不同媒体上显示不同的样式。常用阈值： 小于768px：小屏幕；768px-992px：中等屏幕；992px-1200px：大屏幕；大于1200px：超大屏幕。 <!DOCTYPE html>…...

编程日记 2025/7/27 21:14:12

Spring |（四）IoC/DI配置管理第三方bean

文章目录 📚数据源对象管理🐇环境准备🐇实现Druid管理🐇实现C3P0管理 📚加载properties文件🐇第三方bean属性优化🐇读取单个属性学习来源：黑马程序员SSM框架教程_SpringSpringMVCMa…...

编程日记 2025/7/22 11:44:05

Qt桌面应用开发第六天（鼠标事件定时器事件定时器类事件分发器事件过滤器）

目录 1.1鼠标进入和离开enterEvent\leaveEvent 1.2鼠标按下释放和移动mousePressEvent\mouseReleaseEvent\mouseMoveEvent 1.3定时器事件timerEvent 1.4定时器类QTimer 1.5事件分发器event 1.6事件过滤器eventFilter 1.1鼠标进入和离开enterEvent\leaveEvent 事件&#x…...

编程日记 2025/7/27 15:52:42

MySQL-存储过程

目录一、存储过程定义二、存储过程创建 1、变量的定义 2、存储过程的分支语句 2.1 双分支IF语句 2.2 多分支IF语句 3、存储过程的循环语句三、存储过程调用四、存储过程显示和删除一、存储过程定义存储过程（Stored Procedure）是一种在数…...

编程日记 2025/7/23 23:05:41

数据指标与标签在数据分析中的关系与应用

导读：分享数据指标体系的文章很多，但讲数据标签的文章很少。实际上，标签和指标一样，是数据分析的左膀右臂，两者同样重要。实际上，很多人分析不深入，就是因为缺少对标签的应用。今天系统的讲解下…...

编程日记 2025/7/25 19:37:07

LWE详细介绍

LWE问题，即学习误差问题（Learning With Errors problem），是密码学中一个重要的硬问题，尤其在后量子密码学中占有核心地位。LWE问题由Regev在2005年提出，其设计基于格理论，被认为是一个在平均情况…...

编程日记 2025/7/27 18:49:20

Linux系统Docker部署开源在线协作笔记Trilium Notes与远程访问详细教程

目录 ⛳️推荐前言 1. 安装docker与docker-compose 2. 启动容器运行镜像 3. 本地访问测试 4.安装内网穿透 5. 创建公网地址 6. 创建固定公网地址 ⛳️推荐前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下…...

编程日记 2025/7/27 21:07:59

【Spring MVC】初步了解Spring MVC的基本概念与如何与浏览器建立连接

前言 🌟🌟本期讲解关于SpringMVC的基础概念，以及如何实现与浏览器的连接，参数的传递~~~ 🌈感兴趣的小伙伴看一看小编主页：GGBondlctrl-CSDN博客 🔥 你的点赞就是小编不断更新的最大动力 …...

编程日记 2025/7/27 21:09:12

游戏AI实现-决策树

代码实现： 定义一个决策树节点 class DecisionTreeNode{public DecisionTreeNode(){} } 定义一个行为类： class Action : DecisionTreeNode{ } 定义一个决策类： class Decision : DecisionTreeNode{ } 应用： 参考书…...

编程日记 2025/7/23 2:53:40

9个最佳WordPress PDF插件(查看器、嵌入和下载)

在过去的几年里，我们一直在使用不同的 PDF 插件在我们的网站上创建、编辑和嵌入文档。然而，经过多次尝试和错误，我们意识到并不是每个插件都是相同的。事实上，为您的企业或电子商务网站选择合适的 PDF 插件可能是一项艰巨的任务…...

编程日记 2025/7/25 6:08:53

odoo18中模型的常用字段类型

字段的公共属性: Char 字符类型，对应数据库中varchar类型，除了通用类型外接收另外两个参数： size: 字符长度，超出的长度将被截断 trim: 默认True，是否字段值应该被去空白。 Text 文本类型，对应数据库…...

编程日记 2025/7/27 20:45:38

VUE 指令事件绑定，.stop阻止冒泡

1、VUE 的模板语法和指令目的增强html的功能所有的指令以自定义属性的方式去写 v-xxx ,指令就是vue提供给我们能够更方便将数据和页面展示出来的操作，具体就是以数据去驱动DOM ,简化DOM操作的行为。 2、内容渲染指令 ① {{}} 模板渲染（模板引擎&am…...

编程日记 2025/7/24 4:28:24

在Excel中处理不规范的日期格式数据并判断格式是否正确

有一个Excel表，录入的日期格式很混乱，有些看着差不多，但实际多一个空格少一个字符很难发现，希望的理想格式是 1980-01-01，10位，即：“YYYY-mm-dd”，实际上数据表中这样的格式都有 19…...

编程日记 2025/7/23 1:18:57

webpack基础配置

文章目录一、默认入口和默认出口二、资源配置三、输出文件3.1 多文件入口3.2 HtmlWebpackPlugin插件四、环境4.1 环境变量4.2 热更新五、代码分离5.1 公共模块5.2 懒加载5.3 预获取/预加载模块六、缓存七、Tree Shaking八、公共路径 webpack 是一个用于现代 JavaScript 应用…...

编程日记 2025/7/22 5:30:25

stm32利用LED配置基础寄存器+体验滴答定时器+hal库环境配置

P1 LED控制与流水灯效果实现概述大家好，今天我们来学习一下如何在STM32上控制LED灯，并且实现一个流水灯的效果。这不仅是一个基础的实践，也是嵌入式开发中非常常见的需求。 LED控制 1. LED初始化首先，我们需要对LED灯对应…...

编程日记 2025/7/25 8:42:17

Spark RDD sortBy算子执行时进行数据 “采样”是什么意思？

一、sortBy 和 RangePartitioner sortBy 在 Spark 中会在执行排序时采用 rangePartitioner 进行分区，这会影响数据的分区方式，并且这一步骤是通过对数据进行 “采样” 来计算分区的范围。不过，重要的是，sortBy 本身仍然是一个 tr…...

编程日记 2025/7/26 12:28:48

Ubuntu24.04下的docker问题

按官网提示是可以安装成功的，但是curl无法使用https下载，会造成下述语句执行失败 # Add Dockers official GPG key: sudo apt-get update sudo apt-get install ca-certificates curl sudo install -m 0755 -d /etc/apt/keyrings sudo curl -fsSL https…...

编程日记 2025/7/25 21:28:05

Tri Mode Ethernet MAC IP核详解

本文对 Vivado 的三速 MAC IP 核（Tri Mode Ethernet MAC，TEMAC）进行介绍。在自行实现三速以太网 MAC 控制器时，GMII/RGMII 接口可以通过 IDDR、ODDR 原语实现，然而实际使用中自己实现的模块性能不是很稳定&#xff08…...

编程日记 2025/7/25 10:32:32

【U盘车载音乐】某宝198的3068首车载专用音乐合集【高音质】24G

「【U盘车载音乐】某宝198的3068首车载专用音乐合集【高音质】24G」复制下方口令，打开最新版「夸克APP」即可获取保存（防止和谐！！！） 口令： 动作懿范鉴真渡多好备用口令： /~19dc35…...

编程日记 2025/7/7 11:29:29

android 实现答题功能

一、效果二、实现思路 1、界面实现实现起来其实不难，首先我们可以看到，界面是由答题进度、题目、选项ABCD组成，现在就是要考虑实现方式，答题进度可以使用Textviewprogressbar实现，题目直接使用Textview，…...

编程日记 2025/7/23 8:06:03

JSONP处理跨域请求

JSONP 背景由于浏览器存在安全策略，所以当访问的请求中的协议、域名、端口其中一个与本站不同时就会形成跨域，这里介绍一种比较简单的方案——jsonp。原理浏览器对 script、img这些带有src属性的的标签在发送请求时是不会触发跨域的校验&#xff…...

编程日记 2025/7/23 19:21:04

栈的应用,力扣394.字符串解码力扣946.验证栈序列力扣429.N叉树的层序遍历力扣103.二叉树的锯齿形层序遍历

目录力扣394.字符串解码力扣946.验证栈序列力扣429.N叉树的层序遍历力扣103.二叉树的锯齿形层序遍历力扣394.字符串解码看见括号，由内而外，转向用栈解决。使用两个栈处理，一个用String,一个用Integer 遇到数字:提取数字放入到数字栈…...

编程日记 2025/7/23 6:44:24

华为手机启用ADB无线调试功能

打开开发者模式，勾选USB调试，和“仅充电”模式下允许ADB调试确认设置添加adb路径到PATH变量使用adb查看安卓设置切换为无线模式：查看手机IP...

编程日记 2025/7/2 9:21:09

HTML 元素类型介绍

目录 1. 块级元素（Block-level Elements） 2. 行级元素（Inline Elements） 3. 行内块级元素（Inline-block Elements） 4. 表格相关元素 5. 列表相关元素 6. 表单相关元素示例代码示例效果编辑 …...

编程日记 2025/7/15 6:02:14

前端反向代理的配置和實現

反向代理是位於客戶端和服務器之間的一個中間層，它代表客戶端向伺服器發起請求，然後將伺服器的回應返回給客戶端。與傳統的正向代理不同，反向代理是由伺服器端配置的，客戶端通常不知道它的存在。在前端開發中，反向代理…...

编程日记 2025/7/23 7:34:31

日志分析工具

一、nginx_log_analysis工具 1、工具下载，http://linux5588.blog.51cto.com/，它是用python语言写的，只是用来分析nginx日志，它的输出比较简单，以IP为主，可以查看每个IP的访问的流量，次数&#…...

编程日记 2025/7/25 21:06:51

python: Serialize and Deserialize complex JSON using jsonpickle

编程日记 2025/7/27 1:27:55

【分布式锁解决超卖问题】setnx实现

目录使用场景的描述并发安全问题悲观锁与乐观锁问题一人一单的问题服务器负载均衡问题分布式锁分布式锁的实现获取锁释放锁实现思路误删情况的分析解决误删的方法代码优化分布式锁的原子性分析文章代码地址：分布式锁1.0 使用场景的描述今天的主人…...

编程日记 2025/7/25 7:36:12

【MySQL实战45讲笔记】基础篇——事务隔离

系列文章基础篇——MySQL 的基础架构基础篇——redo log 和 binlog 目录系列文章1. 事务隔离1.1 隔离性与隔离级别1.2 如何实现事务隔离1.3 事务的启动方式1.4 思考： 使用什么方案来避免长事务 1. 事务隔离简单来说，事务就是要保证一组数据库操作&…...

编程日记 2025/7/26 21:44:10

RFdiffusion calculate_igso3函数解读

calculate_igso3 函数旨在对 IGSO(3) 分布的概率密度函数 (PDF)、累积分布函数 (CDF)、以及相关统计量进行数值近似计算，特别用于预计算以加速后续操作（例如采样、反向扩散等）。 calculate_igso3函数源代码： def calculate_igso3(*, num_sigma, num_omega, min_sigma, ma…...

编程日记 2025/7/27 13:17:33

Vue3 + Vite 项目引入 postcss + tailwindcss

一、PostCSS 1. 简介 PostCSS 是一个强大的 CSS 处理工具，它本身是一个工具库，但其核心功能是通过插件扩展，来对 CSS 进行编译、转换和优化。它适用于现代 CSS 开发，提供更灵活、高效的方式来处理样式表。 2. 主要作用增强 CS…...

编程日记 2025/7/24 7:34:44

AI Large Language Model

AI 的 Large Language model LLM , 大语言模型： 是AI的模型，专门设计用来处理自然语言相关任务。它们通过深度学习和庞大的训练数据集，在理解和生成自然语言文本方面表现出色。常见的 LLM 包括 OpenAI 的 GPT 系列、Google 的 PaLM 和 Meta…...

编程日记 2025/7/23 12:09:10

Linux系统性能优化技巧

系统性能优化在当今的信息技术领域，Linux系统的性能优化变得越来越重要。随着Linux操作系统的广泛应用，从桌面环境到大型服务器集群，性能优化不仅可以提升系统的响应速度和吞吐量，还能降低资源消耗，从而延长硬件使用…...

编程日记 2025/7/24 19:40:02

基于CNN+RNNs（LSTM, GRU）的红点位置检测（pytorch）

1 项目背景需要在图片精确识别三跟红线所在的位置，并输出这三个像素的位置。其中，每跟红线占据不止一个像素，并且像素颜色也并不是饱和度和亮度极高的红黑配色，每个红线放大后可能是这样的。而我们的目标是精确输出每个红点的…...

编程日记 2025/7/27 19:54:37

【AI系统】GPU 架构回顾（从2018年-2024年）

Turing 架构 2018 年 Turing 图灵架构发布，采用 TSMC 12 nm 工艺，总共 18.6 亿个晶体管。在 PC 游戏、专业图形应用程序和深度学习推理方面，效率和性能都取得了重大进步。相比上一代 Volta 架构主要更新了 Tensor Core（专门为执行…...

编程日记 2025/7/26 15:14:37

Vue 内置组件 keep-alive 中 LRU 缓存淘汰策略和实现

LRU（Least Recently Used，最近最少使用）是通过记录缓存项的访问顺序来决定淘汰的策略：当缓存满时，移除最久未被使用的项。核心概念： 缓存存储：使用 Map 存储键值对，用于快速访问缓…...

编程日记 2025/7/25 4:51:11

联邦学习安全聚合算法综述（论文解析）以及如何确定自己研究方向的方法

自己写相关论文的方法： 可以重点看看综述类论文的未来研究方向和引言中前人已经做过的内容联邦学习安全聚合算法综述 auth:江萍 1 通讯作者李芯蕊 1 赵晓阳 2 杭永凯摘要摘要：随着深度学习技术的发展，人工智能在社会的各个方面有着重要…...

编程日记 2025/7/22 21:36:48

【JAVA 笔记】12 带有数据库文件的完整的JDBC访问例子，命令行界面

【JAVA 笔记】12 带有数据库文件的完整的JDBC访问例子，命令行界面代码结构解析 1. 导入必要的包 import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.Statement; import java.sql.PreparedStatement; impo…...

编程日记 2025/7/27 16:54:08

基于java+SpringBoot+Vue的在线宠物用品交易网站设计与实现

项目运行环境配置： Jdk1.8 Tomcat7.0 Mysql HBuilderX（Webstorm也行） Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。项目技术： Springboot mybatis Maven mysql5.7或8.0等等组成&#x…...

编程日记 2025/7/23 17:19:27

智慧社区管理系统平台提升物业运营效率与用户体验

内容概要智慧社区管理系统平台是一个集成了多项功能的综合性解决方案，旨在通过先进的技术手段提升物业管理的效率和居民的生活质量。该平台不仅关注物业运营的各个方面，还强调用户体验的重要性。随着科技的发展，社区管理方式正发生着翻天覆…...

编程日记 2025/7/27 12:19:27

el-table-column自动生成序号在序号前插入图标

实现效果： 代码如下： 在el-table里加入这个就可以了，需要拿到值可以用scope.$index <el-table-column type"index" label"序号" show-overflow-tooltip"true" min-width"40">…...

编程日记 2025/7/17 11:04:33

深度学习之目标检测的常用标注工具

1 LabelImg LabelImg 是一款开源的图像标注工具，标签可用于分类和目标检测，它是用 Python 编写的，并使用Qt作为其图形界面，简单好用。注释以 PASCAL VOC 格式保存为 XML 文件，这是 ImageNet 使用的格式。此外&…...

编程日记 2025/7/26 6:48:11

「Mac玩转仓颉内测版21」基础篇1 - 仓颉程序的基本组成

本篇将系统介绍Cangjie编程语言中程序的基本组成部分，涵盖 main 函数的定义、包与模块的使用、变量类型、作用域和代码结构原则，帮助开发者理解Cangjie程序的整体结构。关键词程序入口点main函数包与模块变量类型与作用域值类型与引用类型代码结构与规…...

编程日记 2025/7/22 15:55:14

【计算机网络】解决bind error

服务器有时可以立即重启，有时候无法立即重启 — bind error 首先要知道：四次挥手动作完成之后，主动断开连接的一方要维持一段时间的TIME_WAIT bind error原因：因为是服务器主动断开的，所以服务器要去维持TIME_WAIT状…...

编程日记 2025/7/10 12:18:43

【SVN和GIT】版本控制系统详细下载使用教程

文章目录 ** 参考文章一、什么是SVN和GIT二、软件使用介绍1 SVN安装1.1 服务端SVN下载地址1.2 客户端SVN下载地址2 SVN使用2.1 服务端SVN基础使用2.1.1 创建存储库和用户成员2.1.2 为存储库添加访问人员2.2 客户端SVN基础使用2.2.1 在本地下载库中的内容2.2.2 版本文件操作--更…...

编程日记 2025/7/22 23:35:21

初识 Pynecone：构建现代化 Web 应用的 Python 框架

初识 Pynecone：构建现代化 Web 应用的 Python 框架引言在 Web 开发的世界里，Python 是后端开发的常客，但如果想用 Python 直接构建现代化的前端应用会怎样？这正是 Pynecone 框架的用武之地！Pynecone 是一个全栈 Pyt…...

编程日记 2025/7/22 9:59:45

Go-RPC关键指标分析与企业实践

1.稳定性-保障策略熔断：保护调用方限流：保护被调用方超时控制：避免浪费 2.稳定性-请求成功率（用重复发送负载均衡） 3.稳定性-长尾请求（用备份请求） 4.稳定性-注册中间件易用性&#xff1a…...

编程日记 2025/7/22 19:58:09

社交电商专业赋能高校教育与产业协同发展：定制开发AI智能名片及2+1链动商城小程序的创新驱动

摘要：本文围绕社交电商有望成为高校常态专业这一趋势展开深入探讨，剖析国家政策认可下其学科发展前景，着重阐述在专业建设进程中面临的师资短缺及实践教学难题。通过引入定制开发AI智能名片与21链动商城小程序，探究如何借助这些新…...

编程日记 2025/7/23 10:50:54

Ubuntu下安装Qt

1.如图1所示，在Index of /archive上下载安装包； 图1 2.将图1安装包下载好之后，通过共享文件夹的方式拷贝到ubutntu，如图2所示； 图2 3.如图3所示，执行chmod x qt-creator-opensource-linux-x86_64-10.0.2.…...

编程日记 2025/7/23 10:39:27

《FreeRTOS任务删除篇》

任务删除函数源码1. 进入临界区1.1 第一步1.2 第二步1.3 第三步1.4 第四步 2. 获取待删除任务的任务控制块TCB3. 从就绪/延迟列表中删除任务4. 从事件列表中删除任务5. 如果待删除任务是当前运行的任务6. 如果待删除任务是其它任务7. 退出临界区7.1 第一步7.2 第二步7.3 第三步…...

编程日记 2025/7/26 19:39:33

CSS3_响应式布局

1、媒体样式

2、媒体特性

3、运算符

相关文章：