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

[CSS3]百分比布局

article 2025/9/15 3:09:31

移动端特点

PC和手机

PC端网页和移动端网页的有什么不同?

PC屏幕大，网页固定版心
手机屏幕小，网页宽度多数为100%

谷歌模拟器

使用谷歌模拟器可以在电脑里面调试移动端的网页

屏幕尺寸

了解屏幕尺寸概念

屏幕尺寸: 指的是屏幕对角线的长度，一般用英寸来度量

PC端主流设备的分辨率

PC端常见分辨率

这个分辨率是屏幕硬件的分辨率, 出厂自带, 无法修改, 就是物理分辨率
1920 * 1080
1366 * 760

在操作系统中, 都会有一个推荐的缩放比例

应用这个缩放150%之后, 屏幕呈现的分辨率就变了
(1920/150%) * (1080/150%)
这个实际使用的分辨率是操作系统(软件)控制的, 就是逻辑分辨率
逻辑分辨率的作用就是统一屏幕的显示效果, 让不同分辨率的屏幕呈现一致的UI体验

移动端主流设备的分辨率

制作网页参考物理分辨率还是逻辑分辨率?

制作网页都要参考逻辑分辨率
下面是京东网站, 在我电脑上展示的宽度是1690, 这个就是我的屏幕的逻辑分辨率: 2560 / 150% = 1707

存在误差是因为京东网页右侧滚动条占用了一点宽度

下面是移动端网站, 使用的也是逻辑分辨率

适口标签

默认情况下，PC网页的宽度和逻辑分辨率是相同的

<!DOCTYPE html>
<html lang="en">/* 最简单的HTML */
/* 默认宽度就是屏幕的逻辑分辨率宽度 */
/* 2560 / 150% = 1707 */
<head><meta charset="UTF-8"><title>Document</title>
</head><body><div>hello</div>
</body></html>

默认情况下，手机网页的宽度固定是980, 和逻辑分辨率无关

使用适口标签, 使移动端网页的宽度和设备宽度(逻辑分辨率)相同

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 适口: 显示HTML网页的区域 --><!-- 适口标签:  用来约束适口的标签 --><!-- 属性: viewport: 视口width=device-width: 视口宽度=设备宽度initial-scale=1.0: 缩放1倍(不缩放)--><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div>hello</div>
</body></html>

二倍图

设计师的设计图一般都是750px的图(也就是苹果6/7/8的物理分辨率), 称为二倍图

如果设计图是375px, 更方便我们写代码, 因为代码要按照设备的逻辑分辨率设置元素尺寸
但是375px的图放在750px的屏幕上显示, 效果是不好的,会模糊失真
为了保证显示效果, 设计稿都是按照物理分辨率(750px)设计
在H5中二倍图最多, App中, 有可能会遇到多倍图

能够使用像素大厨软件测量二倍图中元素的尺寸

拿到移动端设计稿之后, 我们把设计稿拖到像素大厨, 然后在开发模式里, 把设计稿选项里的1x改成2x,
然后再测量尺寸, 这个尺寸就是写代码的尺寸

百分比布局

百分比布局也叫流式布局,

就是宽度自适应(百分比单位), 高度固定(像素单位)
代码示例

<!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>京东</title><style>* {margin: 0;padding: 0;}li {list-style: none;}.toolbar {position: fixed;left: 0;bottom: 0;/* 百分比布局  流式布局 */width: 100%;height: 50px;background-color: pink;border-top: 1px solid #ccc;}.toolbar li img {height: 100%;}.toolbar li {float: left;width: 20%;height: 50px;}</style>
</head><body><div class="toolbar"><ul><li><a href="#"><img src="./images/index.png" alt=""></a></li><li><a href="#"><img src="./images/classify.png" alt=""></a></li><li><a href="#"><img src="./images/jd.png" alt=""></a></li><li><a href="#"><img src="./images/car.png" alt=""></a></li><li><a href="#"><img src="./images/login.png" alt=""></a></li></ul></div>
</body></html>

随着技术发展,行业要求也越高,现在也要求高度自适应.

[CSS3]百分比布局

移动端特点 PC和手机 PC端网页和移动端网页的有什么不同? PC屏幕大，网页固定版心手机屏幕小，网页宽度多数为100% 谷歌模拟器使用谷歌模拟器可以在电脑里面调试移动端的网页屏幕尺寸了解屏幕尺寸概念屏幕尺寸: 指的是屏幕对角线的长度&#xff…...

编程日记 2025/9/5 10:17:25

【Java微服务组件】异步通信P2—Kafka与消息

欢迎来到啾啾的博客🐱。记录学习点滴。分享工作思考和实用技巧，偶尔也分享一些杂谈💬。欢迎评论交流，感谢您的阅读😄。目录引言Kafka与消息生产者发送消息到Kafka批处理发送设计消息的幂等信息确保消息送达acks配置…...

编程日记 2025/9/5 10:14:08

R语言空间数据处理入门教程

我的课程《R语言空间数据处理入门教程》已重新恢复课程售卖，有需要的读者可以学习。 👇点击下方链接（文末“阅读原文”可直达），立即开启你的空间数据之旅： https://www.bilibili.com/cheese/play/ss13775…...

编程日记 2025/9/10 14:53:35

https://www.zaproxy.org/getting-started/ 检测方法 docker pull ghcr.io/zaproxy/zaproxy:stable# 执行baseline测试 docker run -t ghcr.io/zaproxy/zaproxy:stable zap-baseline.py \ -t https://baseline.yeshen.org# 执行api测试 docker run -t ghcr.io/zaproxy/zaproxy…...

编程日记 2025/9/5 10:23:54

UE5.6新版本—— 动画光照系统重点更新

UE5.6预览版已经可以下载，发布会在下个月的6.5号发布。 5.6界面UI设计 5.6 对引擎进行了大规模的重新设计，先看整体内容，主题UI设计被调整了位置，左边大多数的选择，框选工具，吸附工具，挪到了左…...

编程日记 2025/9/5 10:26:11

TypeScript 泛型讲解

如果说 TypeScript 是一门对类型进行编程的语言，那么泛型就是这门语言里的（函数）参数。本章，我将会从多角度讲解 TypeScript 中无处不在的泛型，以及它在类型别名、对象类型、函数与 Class 中的使用方式。一、泛型的核…...

编程日记 2025/9/10 19:39:22

腾讯位置服务重构出行行业的技术底层逻辑

位置智能：重构出行行业的技术底层逻辑在智慧城市建设与交通出行需求爆发的双重驱动下，位置服务正从工具层跃升为出行行业的核心基础设施。腾讯位置服务以“连接物理世界与数字空间”为核心理念，通过构建高精度定位、实时数据融合、智能决策…...

编程日记 2025/9/10 17:33:33

面试相关的知识点

1 vllm 1.1常用概念 1 vllm：是一种大模型推理的框架，使用了张量并行原理，把大型矩阵分割成低秩矩阵，分散到不同的GPU上运行。 2 模型推理与训练：模型训练是指利用pytorch进行对大模型进行预训练。模型推理是指用训…...

编程日记 2025/9/3 14:12:57

如何用JAVA手写一个Tomcat

一、初步理解Tomcat Tomcat是什么？ Tomcat 是一个开源的轻量级 Java Web 应用服务器，核心功能是运行 Servlet/JSP。 Tomcat的核心功能？ Servlet 容器：负责加载、实例化、调用和销毁 Servlet。 HTTP 服务器：监听端口…...

编程日记 2025/9/6 14:26:54

使用 Qt QGraphicsView/QGraphicsScene 绘制色轮

使用 Qt QGraphicsView/QGraphicsScene 绘制色轮本文介绍如何在 Qt 中利用 QGraphicsView 和 QGraphicsScene 实现基础圆形绘制，以及进阶的色轮（Color Wheel）效果。色轮是色彩选择器的常见控件，广泛应用于图形设计、绘画和 UI …...

编程日记 2025/9/6 14:26:36

游戏开发实战（三）：Python复刻「崩坏星穹铁道」嗷呜嗷呜事务所---源码级解析该小游戏背后的算法与设计模式【纯原创】

文章目录奇美拉类摸鱼仔，负能量，真老实，小坏蛋，压力怪治愈师小团体画饼王平凡王坏脾气抗压包请假狂请假王内卷王受气包跑路侠看乐子背锅侠抢功劳急先锋说怪话帮倒忙小夸夸工作狂职业经理严酷恶魔职场清流开始工作吧小奇美拉没想…...

编程日记 2025/8/19 22:27:46

使用glsl 来做视频矫正

描述、优点使用glsl来代替opencv的undistort 和鱼眼矫正，并且最后使用opencv的LUT给glsl 来使用，来达到加速的目的，并且做到和opencv 一模一样的效果，达到实时视频的加速矫正。优点: 没有cuda，也可以做到实时视频矫正，包含各类板子和amd的cpu，intel核显矫正的基本作…...

编程日记 2025/9/6 14:26:31

03-Web后端基础(Maven基础)

1. 初始Maven 1.1 介绍 Maven 是一款用于管理和构建Java项目的工具，是Apache旗下的一个开源项目。 Apache 软件基金会，成立于1999年7月，是目前世界上最大的最受欢迎的开源软件基金会，也是一个专门为支持开源项目而生的非盈利性…...

编程日记 2025/9/12 0:49:46

LLM驱动下的软件工程再造：驾驭调试、测试与工程化管理的智能新范式

摘要：大语言模型（LLM）驱动的软件开发正以前所未有的力量重塑整个行业，从以人为中心的编码模式迅速转向意图驱动和AI编排的智能生成。这场变革带来了生产力的指数级飞跃，但也对传统软件工程中调试、测试和代码工程化管理的核心支柱发起了深刻挑战。本文将剖析这些根本性转…...

编程日记 2025/8/21 20:43:30

大语言模型与人工智能：技术演进、生态重构与未来挑战

目录技术演进：从专用AI到通用智能的跃迁核心能力：LLM如何重构AI技术栈应用场景：垂直领域的技术革命生态关系：LLM与AI技术矩阵的协同演进挑战局限：智能天花板与伦理困境未来趋势：从语言理解到世界模型1. 技术演进：从专用AI到通用智能的跃迁 1.1 三次技术浪潮的跨越 #me…...

编程日记 2025/7/31 8:19:02

SpringSecurity授权、认证

引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency><groupId>org.springframework.boot</groupId><artifactI…...

编程日记 2025/6/3 23:59:51

蓝桥杯19682 完全背包

问题描述有 N 件物品和一个体积为 M 的背包。第 i 个物品的体积为 vi，价值为 wi。每件物品可以使用无限次。请问可以通过什么样的方式选择物品，使得物品总体积不超过 M 的情况下总价值最大，输出这个最大价值即可。输入格式第一行…...

编程日记 2025/9/12 2:16:27

DeepSeek源码解构：从MoE架构到MLA的工程化实现

文章目录 **一、代码结构全景：从模型定义到分布式训练****二、MoE架构：动态路由与稀疏激活的工程化实践****1. 专家路由机制（带负载均衡）****数学原理：负载均衡损失推导** **三、MLA注意力机制：低秩压缩与解…...

编程日记 2025/9/11 21:39:57

leetcode 3355. 零数组变换 I 中等

给定一个长度为 n 的整数数组 nums 和一个二维数组 queries，其中 queries[i] [li, ri]。对于每个查询 queries[i]： 在 nums 的下标范围 [li, ri] 内选择一个下标子集。将选中的每个下标对应的元素值减 1。零数组是指所有元素都等于 0 的数组。 …...

编程日记 2025/9/1 23:58:00

【VLNs篇】02：NavGPT-在视觉与语言导航中使用大型语言模型进行显式推理

方面 (Aspect)内容总结 (Content Summary)论文标题NavGPT: 在视觉与语言导航中使用大型语言模型进行显式推理 (NavGPT: Explicit Reasoning in Vision-and-Language Navigation with Large Language Models)核心问题探究大型语言模型 (LLM) 在复杂具身场景（特别是视…...

编程日记 2025/9/11 21:13:17