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

响应式布局-媒体查询父级布局容器

news 2025/7/15 7:36:57

1.响应式布局容器

        父局作为布局容器，配合自己元素实现变化效果，原理：在不通过屏幕下面吗，通过媒体查询来改变子元素的排列方式和大小，从而实现不同尺寸屏幕下看到不同的效果。

2.响应尺寸布局容器常见宽度划分

手机-小于768px 宽度设置100%；

平板-大于等于768px 设置宽度为750px

桌面显示器-大于等于992px 设置宽度 970px

大屏幕显示器-大于等于1200px 宽度设置为 1170px;

设置宽度比屏幕尺寸小，留取左右空白居中对齐；

3.媒体查询检测屏幕尺寸应用样式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.content {height: 400px;background-color: red;margin: 0 auto;}/* 手机-小于768px 宽度设置100%；*/@media screen and (max-width:767px) {.content {width: 100%;}}/* 平板-大于等于768px 设置宽度为750px */@media screen and (min-width:768px) {.content {width: 750px;}}/* 桌面显示器-大于等于992px 设置宽度 970px */@media screen and (min-width:992px) {.content {width: 970px;}}/* 大屏幕显示器-大于等于1200px 宽度设置为 1170px; */@media screen and (min-width:1200px) {.content {width: 1170px;}}</style>
</head><body><div class="content"></div>
</body></html>

 

3.总结

核心的实现方法 根据媒体查询不同的屏幕尺寸大小来应用不同的css来实现不同的尺寸下屏幕的显示。

相关文章：

响应式布局-媒体查询父级布局容器

1.响应式布局容器 父局作为布局容器&#xff0c;配合自己元素实现变化效果&#xff0c;原理&#xff1a;在不通过屏幕下面吗&#xff0c;通过媒体查询来改变子元素的排列方式和大小&#xff0c;从而实现不同尺寸屏幕下看到不同的效果。 2.响应尺寸布局容器常见宽度划分 手机-…...

编程日记 2024/9/24 23:54:31

Android APN type 配置和问题

问题/疑问 如果APN配置了非法类型（代码没有定义的），则APN匹配加载的时候最终结果会是空类型。 那么到底是xml解析到数据库就是空type呢？还是Java代码匹配的时候映射是空的呢？ Debug Log 尝试将原本的APN type加入ota或者新建一条ota type APN，检查log情况。 //Type有…...

编程日记 2024/9/24 23:52:26

前端mock了所有……

目录 一、背景描述 二、开发流程 1.引入Mock 2.创建文件 3.需求描述 4.Mock实现 三、总结 一、背景描述 前提&#xff1a; 事情是这样的&#xff0c;老板想要我们写一个demo拿去路演/拉项目&#xff0c;有一些数据&#xff0c;希望前端接一下&#xff0c;写几个表格&a…...

编程日记 2024/9/24 23:51:24

fiddler抓包10_列表显示请求方法

① 请求列表表头&#xff0c;鼠标悬停点击右键弹出选项菜单。 ② 点击“Customize columns”&#xff08;定制列&#xff09;。 ③ 弹窗中&#xff0c;“Collection”下拉列表选择“Miscellaneous”&#xff08;更多字段&#xff09;。 ④ “Field Name”选择“RequestMethod”…...

编程日记 2024/9/24 23:50:23

Win10系统复制、粘贴、新建、删除文件或文件夹后需要手动刷新的解决办法

有些win10系统可能会出现新建、粘贴、删除文件或文件夹后保持原来的状态不变&#xff0c;需要手动刷新&#xff0c;我这边新装的几个系统都有这个问题&#xff0c;已经困扰很久了&#xff0c;我从微软论坛和CSDN社区找了了很多方法都没解决&#xff0c;微软工程师给的建议包括重…...

编程日记 2024/9/24 23:47:20

BERT训练环节（代码实现）

1.代码实现 #导包 import torch from torch import nn import dltools #加载数据需要用到的声明变量 batch_size, max_len 1, 64 #获取训练数据迭代器、词汇表 train_iter, vocab dltools.load_data_wiki(batch_size, max_len) #其余都是二维数组 #tokens, segments, vali…...

编程日记 2024/9/24 23:46:18

必须执行该语句才能获得结果

UncategorizedSQLException: Error getting generated key or setting result to parameter object. Cause: com.microsoft.sqlserver.jdbc.SQLServerException: 必须执行该语句才能获得结果。 ; uncategorized SQLException; SQL state [null]; error code [0]; 必须执行该语句…...

编程日记 2024/9/24 23:45:16

AI论文写作可靠吗？分享5款论文写作助手ai免费网站

AI论文写作的可靠性是一个备受关注的话题。在当前的技术背景下&#xff0c;AI写作工具能够显著提高论文写作的效率和质量&#xff0c;但其可靠性和安全性仍需谨慎评估。 AI论文写作的可靠性 技术能力与限制 AI论文写作的质量很大程度上取决于用户提供的输入指令或素材的质量…...

编程日记 2024/9/24 23:41:13

AJAX 入门 day3 XMLHttpRequest、Promise对象、自己封装简单版的axios

目录 1.XMLHttpRequest 1.1 XMLHttpRequest认识 1.2 用ajax发送请求 1.3 案例 1.4 XMLHttpRequest - 查询参数 1.5 XMLHttpRequest - 数据提交 2.Promise 2.1 Promise认识 2.2 Promise - 三种状态 2.3 案例 3.封装简易版 axios 3.1 封装_简易axios_获取省份列表 3…...

编程日记 2024/9/24 23:39:10

oracle avg、count、max、min、sum、having、any、all、nvl的用法

组函数 having的使用 any的使用 all的使用 nvl 从执行结果来看&#xff0c;nvl(列名&#xff0c;默认值)&#xff0c;nvl的作用就是如果列名所在的这一行出现空则用默认值替换...

编程日记 2024/9/24 23:38:09

Python一分钟：装饰器

一、装饰器基础 函数即对象 在python中函数可以作为参数传递&#xff0c;和任何其它对象一样如:str、int、float、list等等 def say_hello(name):return f"Hello {name}"def be_awesome(name):return f"Yo {name}, together were the awesomest!"def gr…...

编程日记 2024/9/24 23:37:08

Docker部署ddns-go教程(包含完整的配置过程)

本章教程教程，主要介绍如何用Docker部署ddns-go。 一、拉取容器 docker pull jeessy/ddns-go:v6.7.0二、运行容器 docker run -d \--name ddns-go \--restart unless-stopped \...

编程日记 2024/9/24 23:36:07

简单多状态dp第三弹 leetcode -买卖股票的最佳时机问题

309. 买卖股票的最佳时机含冷冻期 买卖股票的最佳时机含冷冻期 分析: 使用动态规划解决 状态表示: 由于有「买入」「可交易」「冷冻期」三个状态&#xff0c;因此我们可以选择用三个数组&#xff0c;其中&#xff1a; ▪ dp[i][0] 表示&#xff1a;第 i 天结束后&#xff0c…...

编程日记 2024/9/24 23:35:06

游戏化在电子课程中的作用：提高参与度和学习成果

游戏化&#xff0c;即游戏设计元素在非游戏环境中的应用&#xff0c;已成为电子学习领域的强大工具。通过将积分、徽章、排行榜和挑战等游戏机制整合到教育内容中&#xff0c;电子课程可以变得更具吸引力、激励性和有效性。以下是游戏化如何在转变电子学习中发挥重要作用&#…...

编程日记 2024/9/24 23:32:03

php+mysql安装

1.卸载mysql 没启动不停止 2.下载 3.解压 4.点击安装 5.出现成功 端口占用修改 修改端口89或者87 可视化扩展 修改后重启 开启扩展...

编程日记 2024/9/24 23:29:00

音视频入门基础：FLV专题（5）——FFmpeg源码中，判断某文件是否为FLV文件的实现

一、引言 通过FFmpeg命令&#xff1a; ./ffmpeg -i XXX.flv 可以判断出某个文件是否为FLV文件&#xff1a; 所以FFmpeg是怎样判断出某个文件是否为FLV文件呢&#xff1f;它内部其实是通过flv_probe函数来判断的。从《FFmpeg源码&#xff1a;av_probe_input_format3函数和AVI…...

编程日记 2024/9/24 23:27:59

Tomcat 乱码问题彻底解决

1. 终端乱码问题 找到 tomcat 安装目录下的 conf ---> logging.properties .修改ConsoleHandler.endcoding GBK &#xff08;如果在idea中设置了UTF-8字符集&#xff0c;这里就不需要修改&#xff09; 2. CMD命令窗口设置编码 参考&#xff1a;WIN10的cmd查看编码方式&am…...

编程日记 2024/9/24 23:26:58

RGB颜色模型

RGB颜色模型是一种广泛应用于数字图像和计算机图形领域的颜色表示方法 一、基本概念 RGB 代表红色&#xff08;Red&#xff09;、绿色&#xff08;Green&#xff09;和蓝色&#xff08;Blue&#xff09;三种基本颜色。这些颜色被视为加色模型中的原色&#xff0c;意味着它们可…...

编程日记 2024/9/24 23:25:56

智能工厂的软件设计 创新型原始制造商(“创新工厂“)的Creator原型（统一行为理论）之2

Q8、今天我们继续昨天开始的 “智能工厂的软件设计”以“统一行为理论”为指导原则的 创新型原始制造商的Creator伪代码--创新工厂“原型”。这是在前述将“程序program”问题的三个体现“方面”&#xff08;逻辑/语言/数学&#xff09; 视为符号学的三分支&#xff08;语用语义…...

编程日记 2024/9/24 23:24:55

【个人博客hexo版】hexo安装时会出现的一些问题

项目场景&#xff1a; 项目场景&#xff1a;在完成了GitHub仓库和git的连接之后&#xff0c;就要新建一个文件夹&#xff08;例如hexo blog&#xff09;进行下一步hexo的使用 问题描述 例如&#xff1a;如图所示 原因分析&#xff1a; 这些error不用看它到底是什么&#xf…...

编程日记 2024/9/24 23:23:54

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2025/7/13 17:44:30

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2025/7/14 20:10:00

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2025/7/15 0:32:48

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

编程新知 2025/7/12 20:12:48

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

编程新知 2025/7/6 20:57:18

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2025/7/15 2:01:06

android13 app的触摸问题定位分析流程

一、知识点 一般来说，触摸问题都是app层面出问题，我们可以在ViewRootImpl.java添加log的方式定位；如果是touchableRegion的计算问题，就会相对比较麻烦了，需要通过adb shell dumpsys input > input.log指令，且通过打印堆栈的方式，逐步定位问题，并找到修改方案。 问题…...

编程新知 2025/7/10 14:11:46

PHP 8.5 即将发布：管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

编程新知 2025/7/14 20:57:36

论文阅读：LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...

编程新知 2025/7/13 14:10:43

Kubernetes 节点自动伸缩（Cluster Autoscaler）原理与实践

在 Kubernetes 集群中&#xff0c;如何在保障应用高可用的同时有效地管理资源&#xff0c;一直是运维人员和开发者关注的重点。随着微服务架构的普及&#xff0c;集群内各个服务的负载波动日趋明显&#xff0c;传统的手动扩缩容方式已无法满足实时性和弹性需求。 Cluster Auto…...

编程新知 2025/7/10 3:53:30