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

如何根据设计稿进行移动端适配：全面详解

news 来源：原创 2025/8/23 16:52:59

如何根据设计稿进行移动端适配：全面详解

在这里插入图片描述

文章目录

- 如何根据设计稿进行移动端适配：全面详解
- 1. **理解设计稿**
- - 1.1 设计稿的尺寸
  - 1.2 设计稿的单位
- 2. **移动端适配的核心技术**
- - 2.1 使用 `viewport` 元标签
  - - 2.1.1 代码示例
    - 2.1.2 参数说明
  - 2.2 使用相对单位
  - - 2.2.1 `rem` 单位
    - - 实现代码
    - 2.2.2 `vw` 和 `vh` 单位
    - - 实现代码
  - 2.3 使用媒体查询（Media Queries）
  - - 2.3.1 实现代码
    - 2.3.2 断点设置
  - 2.4 使用 Flexbox 和 Grid 布局
  - - 2.4.1 Flexbox 示例
    - 2.4.2 Grid 示例
  - 2.5 图片和媒体的适配
  - - 2.5.1 `srcset` 和 `sizes`
    - - 实现代码
    - 2.5.2 `picture` 标签
    - - 实现代码
- 3. **实际开发中的适配流程**
- - 3.1 步骤 1：分析设计稿
  - 3.2 步骤 2：设置 `viewport`
  - 3.3 步骤 3：选择单位
  - 3.4 步骤 4：编写响应式样式
  - 3.5 步骤 5：测试与调试
- 4. **总结**

在移动端开发中，如何根据设计稿实现页面的精准适配是一个关键问题。由于移动设备的屏幕尺寸和分辨率各异，开发者需要采用多种技术手段来确保页面在不同设备上都能良好显示。本文将详细介绍如何根据设计稿进行移动端适配，涵盖从单位选择到响应式设计的全面解决方案。

1. 理解设计稿

1.1 设计稿的尺寸

设计稿通常以某一特定设备的尺寸为基础（如 iPhone 12 的 390x844px）。
需要明确设计稿的基准尺寸和分辨率（如 2x 或 3x）。

1.2 设计稿的单位

设计稿中的尺寸通常以像素（px）为单位。
需要将设计稿中的像素单位转换为适合移动端的相对单位（如 rem、vw 等）。

2. 移动端适配的核心技术

2.1 使用 `viewport` 元标签

viewport 是移动端适配的基础，用于控制页面的缩放和布局。

2.1.1 代码示例

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2.1.2 参数说明

width=device-width：页面宽度等于设备宽度。
initial-scale=1.0：初始缩放比例为 1。
maximum-scale=1.0：禁止用户放大页面。
user-scalable=no：禁止用户缩放页面。

2.2 使用相对单位

为了适应不同设备的屏幕尺寸，建议使用相对单位（如 rem、vw、vh）代替固定单位（如 px）。

2.2.1 `rem` 单位

rem 是相对于根元素（<html>）的字体大小的单位。
通过设置根元素的 font-size，可以实现整体布局的缩放。

实现代码

html {font-size: 16px; /* 基准字体大小 */
}@media (max-width: 768px) {html {font-size: 14px; /* 在小屏幕上调整字体大小 */}
}.container {width: 20rem; /* 根据根元素字体大小动态调整 */
}

2.2.2 `vw` 和 `vh` 单位

vw 是相对于视口宽度的单位，1vw = 1% 视口宽度。
vh 是相对于视口高度的单位，1vh = 1% 视口高度。

实现代码

.container {width: 50vw; /* 宽度为视口宽度的一半 */height: 50vh; /* 高度为视口高度的一半 */
}

2.3 使用媒体查询（Media Queries）

媒体查询是响应式设计的核心工具，用于根据设备的特性（如屏幕宽度）应用不同的样式。

2.3.1 实现代码

/* 默认样式 */
.container {width: 100%;background-color: lightblue;
}/* 在小屏幕上调整样式 */
@media (max-width: 768px) {.container {width: 90%;background-color: lightgreen;}
}/* 在超小屏幕上调整样式 */
@media (max-width: 480px) {.container {width: 80%;background-color: lightcoral;}
}

2.3.2 断点设置

常见的断点设置：
- 小屏幕：768px
- 超小屏幕：480px

2.4 使用 Flexbox 和 Grid 布局

Flexbox 和 Grid 是强大的布局工具，可以轻松实现复杂的响应式布局。

2.4.1 Flexbox 示例

.container {display: flex;flex-wrap: wrap;justify-content: space-between;
}.item {flex: 1 1 200px; /* 弹性布局，最小宽度为 200px */
}

2.4.2 Grid 示例

.container {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 10px;
}

2.5 图片和媒体的适配

为了在不同设备上显示清晰的图片，需要使用响应式图片技术。

2.5.1 `srcset` 和 `sizes`

srcset 用于指定不同分辨率的图片。
sizes 用于指定图片的显示尺寸。

实现代码

<imgsrc="image-small.jpg"srcset="image-small.jpg 480w, image-medium.jpg 768w, image-large.jpg 1200w"sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"alt="Responsive Image"
>

2.5.2 `picture` 标签

picture 标签可以根据设备特性加载不同的图片。

实现代码

<picture><source media="(max-width: 480px)" srcset="image-small.jpg"><source media="(max-width: 768px)" srcset="image-medium.jpg"><img src="image-large.jpg" alt="Responsive Image">
</picture>

3. 实际开发中的适配流程

3.1 步骤 1：分析设计稿

确定设计稿的基准尺寸和分辨率。
提取设计稿中的关键尺寸（如字体大小、间距、容器宽度等）。

3.2 步骤 2：设置 `viewport`

在 HTML 中添加 viewport 元标签。

3.3 步骤 3：选择单位

使用 rem、vw 等相对单位代替 px。

3.4 步骤 4：编写响应式样式

使用媒体查询、Flexbox 和 Grid 实现响应式布局。

3.5 步骤 5：测试与调试

使用浏览器的开发者工具模拟不同设备。
在真实设备上进行测试，确保页面在各种设备上都能良好显示。

4. 总结

移动端适配的核心在于：

使用 viewport 控制页面缩放。
使用相对单位（如 rem、vw）代替固定单位。
使用媒体查询实现响应式设计。
使用 Flexbox 和 Grid 实现灵活布局。
使用响应式图片技术优化媒体加载。

通过合理应用这些技术，开发者可以确保页面在不同设备上都能精准适配，提供良好的用户体验。

参考文献：

MDN Web Docs - Viewport
CSS Tricks - A Complete Guide to Flexbox
CSS Tricks - A Complete Guide to Grid

如何根据设计稿进行移动端适配：全面详解

如何根据设计稿进行移动端适配：全面详解文章目录如何根据设计稿进行移动端适配：全面详解1. **理解设计稿**1.1 设计稿的尺寸1.2 设计稿的单位 2. **移动端适配的核心技术**2.1 使用 viewport 元标签2.1.1 代码示例2.1.2 参数说明 2.2 使用相对单位2.2.…...

编程日记 2025/8/23 16:52:59

什么是大型语言模型（LLM）？哪个大模型更好用？

什么是 LLM？ ChatGPT 是一种大型语言模型 (LLM)，您可能对此并不陌生。它以非凡的能力而闻名，已证明能够出色地完成各种任务，例如通过考试、生成产品内容、解决问题，甚至在最少的输入提示下编写程序。他们的实力现已…...

编程日记 2025/8/22 7:57:39

集合学习内容总结

集合简介 1、Scala 的集合有三大类：序列 Seq、集Set、映射 Map，所有的集合都扩展自 Iterable 特质。 2、对于几乎所有的集合类，Scala 都同时提供了可变和不可变的版本，分别位于以下两个包不可变集合：scala.collect…...

编程日记 2025/8/17 22:14:50

使用typedef和不使用的区别

使用 typedef 定义的函数指针类型 typedef sensor_drv_params_t* (*load_sensor_drv_func)(); 不使用 typedef 的函数指针声明 sensor_drv_params_t* (*load_sensor_drv_func)(); 这两者看似相似，但在语义和用途上有显著区别。下面将详细解释这两种声明的区别、各…...

编程日记 2025/8/18 0:57:04

基于线性回归模型的汽车燃油效率预测

基于线性回归模型的汽车燃油效率预测 1.作者介绍2.线性回归介绍2.1 线性回归简介2.2 线性回归应用场景 3.基于线性回归模型的汽车燃油效率预测实验3.1 Auto MPG Data Set数据集3.2代码调试3.3完整代码3.4结果展示 4.问题分析基于线性回归模型的汽车燃油效率预测 1.作者介绍郝…...

编程日记 2025/8/17 22:12:31

Playwright之自定义浏览器目录访问出错：BrowserType.launch: Executable doesn‘t exist

Playwright之自定义浏览器目录访问出错：BrowserType.launch: Executable doesn’t exist 问题描述： 在使用playwright进行浏览器自动化的时候，配置了自定义的浏览器目录，当按照自定义的浏览器目录启动浏览器进行操作时&#xff0c…...

编程日记 2025/8/23 2:08:00

如何拿到iframe中嵌入的游戏数据

在 iframe 中嵌入的游戏数据是否能被获取，取决于以下几个关键因素： 1. 同源策略浏览器的同源策略是核心限制。如果父页面和 iframe 中的内容同源（即协议、域名和端口号完全相同），那么可以直接通过 JavaScript 访问 …...

编程日记 2025/8/23 23:06:40

优选算法第七讲：分治

优选算法第七讲：分治 1.分治_快排1.1颜色分类1.2排序数组1.3数组中第k个最大元素1.4库存管理II 2.分治_归并2.1排序数组2.2交易逆序对的总数2.3计算右侧小于当前元素的个数2.4翻转对 1.分治_快排 1.1颜色分类 1.2排序数组 1.3数组中第k个最大元素 1.4库存管理II 2.…...

编程日记 2025/8/20 1:36:49

OpenBMC：BmcWeb 处理http请求4 处理路由对象

OpenBMC：BmcWeb 处理http请求2 查找路由对象-CSDN博客 Router::handle通过findRoute获取了FindRouteResponse对象foundRoute void handle(const std::shared_ptr<Request>& req,const std::shared_ptr<bmcweb::AsyncResp>& asyncResp){FindRouteResponse …...

编程日记 2025/8/23 4:11:11

直流电能表计量解决方案适用于光伏储能充电桩基站等场景

多场景解决方案，准确测量 01 市场规模与增长动力全球直流表市场预测： 2025年市场规模14亿美元，CAGR超15%。驱动因素：充电桩、光伏/储能、基站、直流配电市场增长引擎分析： 充电桩随新能源车迅猛增长&#xff…...

编程日记 2025/8/20 22:39:47

x-cmd install | Slumber - 告别繁琐，拥抱高效的终端 HTTP 客户端

目录核心优势，一览无遗安装应用场景，无限可能示例告别 GUI，拥抱终端还在为调试 API 接口，发送 HTTP 请求而苦恼吗？还在各种 GUI 工具之间切换，只为了发送一个简单的请求吗？现在，有…...

编程日记 2025/8/22 4:03:48

git修改已经push的commit的message

1.修改信息 2.修改message 3.强推...

编程日记 2025/8/17 22:14:36

STM32 基础2

STM32中断响应过程 1、中断源发出中断请求。 2、判断处理器是否允许中断，以及该中断源是否被屏蔽。 3、中断优先级排队。 4、处理器暂停当前程序，保护断点地址和处理器的当前状态，根据中断类型号，查找中断向量表，转到…...

编程日记 2025/8/23 23:07:20

【STL 之速通pair vector list stack queue set map 】

考list 的比较少 --双端的啦 pair 想下，程序是什么样的. 我是我们要带着自己的思考去学习DevangLic.. #include <iostream> #include <utility> #include <string>using namespace std;int main() {// 第一部分：创建并输出两个 pair …...

编程日记 2025/8/23 1:10:23

深度学习篇---LSTM+Attention模型

文章目录前言1. LSTM深入原理剖析1.1 LSTM 架构的进化理解遗忘门简介数学表达式实际作用输入门简介数学表达式后选候选值实际作用输出门简介数学表达式最终输出实际作用 1.2 Attention 机制的动态特性内容感知位置无关可解释性数学本质 1.3 LSTM与Attention的协同效应组合优…...

编程日记 2025/8/21 1:56:27

React 多个 HOC 嵌套太深，会带来哪些隐患？

在 React 中，使用多个高阶组件（HOC，Higher-Order Component） 可能会导致组件层级变深，这可能会带来以下几个影响： 一、带来的影响 1、调试困难由于组件被多个 HOC 包裹，React 开发者工具&am…...

编程日记 2025/8/19 5:27:57

企业工厂生产线马达保护装置功能参数介绍

安科瑞刘鸿鹏摘要工业生产中，电压暂降（晃电）是导致电动机停机、生产中断的主要原因之一，给企业带来巨大的经济损失。本文以安科瑞晃电再起动控制器为例，探讨抗晃电保护器在生产型企业工厂中的应用，分析…...

编程日记 2025/8/20 22:52:56

Redis 的五种数据类型面试回答

这里简单介绍一下面试回答、我之前有详细的去学习、但是一直都觉得太多内容了、太深入了然后面试的时候不知道从哪里讲起、于是我写了这篇CSDN帮助大家面试回答、具体的深入解析下次再说面试官你好我来介绍一下Redis的五种基本数据类型有String List Set ZSet Map 五种基…...

编程日记 2025/8/18 0:46:50

多线程代码案例（定时器） - 3

定时器，是我们日常开发所常用的组件工具，类似于闹钟，设定一个时间，当时间到了之后，定时器可以自动的去执行某个逻辑目录 Timer 的基本使用实现一个 Timer 通过这个类，来描述一个任务通过这个类&…...

编程日记 2025/8/21 5:11:36

基于大模型的GCSE预测与治疗优化系统技术方案

目录技术方案文档：基于大模型的GCSE预测与治疗优化系统1. 数据预处理模块功能：整合多模态数据（EEG、MRI、临床指标等），标准化并生成训练集。伪代码流程图2. 大模型架构（Transformer-GNN混合模型）功能：联合建模时序信号（EEG）与空间结构（脑网络）。伪代码流程图3. 术…...

编程日记 2025/8/23 21:18:47

IntelliJ IDEA 中 Continue 插件使用 DeepSeek-R1 模型指南

IntelliJ IDEA 中 Continue 插件使用 DeepSeek-R1 模型指南 Continue 是一款开源的 AI 编码助手插件，支持 IntelliJ IDEA 等 JetBrains 系列 IDE。它可以通过连接多种语言模型（如 DeepSeek-R1）提供实时代码生成、问题解答和单元测试生成等功…...

编程日记 2025/8/23 17:42:59

Valgrind——内存调试和性能分析工具

文章目录一、Valgrind 介绍二、Valgrind 功能和使用1. 主要功能2. 基本用法2.1 常用选项2.2 内存泄漏检测2.3 详细报告2.4 性能分析2.5 多线程错误检测三、在 Ubuntu 上安装 Valgrind四、示例1. 检测内存泄漏2. 使用未初始化的内存3. 内存读写越界4. 综合错误五、工具集1. M…...

编程日记 2025/8/19 6:09:39

京东API智能风控引擎：基于行为分析识别恶意爬虫与异常调用

京东 API 智能风控引擎基于行为分析识别恶意爬虫与异常调用，主要通过以下几种方式实现： 行为特征分析请求频率：正常用户对 API 的调用频率相对稳定，受到网络延迟、操作速度等因素限制。若发现某个 IP 地址或用户在短时间内对同一…...

编程日记 2025/8/20 20:56:33

Swift 解 LeetCode 250：搞懂同值子树，用递归写出权限系统检查器

文章目录前言问题描述简单说：痛点分析：到底难在哪？1. 子树的概念搞不清楚2. 要不要“递归”？递归从哪开始？3. 怎么“边遍历边判断”？这套路不熟后序遍历全局计数器遍历过程解释一下：和实际场…...

编程日记 2025/8/22 4:24:10

Nginx搭建API网关服务教程-系统架构优化 API统一管理

超实用！用Nginx搭建API网关服务，让你的系统架构更稳更强大！🚀 亲们，今天来给大家种草一个超级实用的API网关搭建方案啦！👀 在如今的Web系统架构中，一个稳定、高性能、可扩展的API网…...

编程日记 2025/8/23 15:06:04

SQL2API是什么？SQL2API与BI为何对数据仓库至关重要？

目录一、SQL2API是什么？ 二、SQL2API的历史演变：从数据共享到服务化革命 1990年代：萌芽于数据仓库的数据共享需求 2010年代初：数据中台推动服务化浪潮 2022年左右：DaaS平台的兴起 2025年代：麦聪定义…...

编程日记 2025/8/20 1:53:11

CentOS 7无法上网问题解决

CentOS 7无法上网问题解决问题配置了桥接模式以后，能够ping通本地IP但是无法ping通www.baidu.com 这里的前提是VWare上已经对虚拟机桥接模式网卡做了正确的选择，比如我现在选择的就是当前能够上外网的网卡： 问题根因 DNS未正确配置。…...

编程日记 2025/8/17 23:49:15

优化 Web 性能：使用 WebP 图片（Uses WebP Images）

在 Web 开发中，图片资源的优化是提升页面加载速度和用户体验的关键。Google 的 Lighthouse 工具在性能审计中特别推荐“使用 WebP 图片”（Uses WebP Images），因为 WebP 格式在保持视觉质量的同时显著减少文件大小。本文将基于 Chr…...

编程日记 2025/8/21 15:50:57

SQL121 创建索引

-- 普通索引 CREATE INDEX idx_duration ON examination_info(duration);-- 唯一索引 CREATE UNIQUE INDEX uniq_idx_exam_id ON examination_info(exam_id);-- 全文索引 CREATE FULLTEXT INDEX full_idx_tag ON examination_info(tag);描述现有一张试卷信息表examination_in…...

编程日记 2025/8/21 19:04:48

Leetcode - 周赛443

目录一、3502. 到达每个位置的最小费用二、3503. 子字符串连接后的最长回文串 I三、3504. 子字符串连接后的最长回文串 II四、3505. 使 K 个子数组内元素相等的最少操作数一、3502. 到达每个位置的最小费用题目链接本题是一道脑筋急转弯，实际就是计算前缀最小…...

编程日记 2025/8/22 8:25:55

dolphinscheduler单机部署链接oracle

部署成功请给小编一个赞或者收藏激励小编 1、安装准备 JDK版本:1.8或者1.8oracle版本：19Coracle驱动版本：8 2、安装jdk 下载地址：https://www.oracle.com/java/technologies/downloads/#java8 下载后上传到/tmp目录下。然后执行下面命…...

编程日记 2025/8/20 11:25:59

Three.js 系列专题 5：加载外部模型

内容概述 Three.js 支持加载多种 3D 文件格式（如 GLTF、OBJ、FBX），这让开发者可以直接使用专业建模软件（如 Blender、Maya）创建的复杂模型。本专题将重点介绍 GLTF 格式的加载，并调整模型的位置和材质。学习目标理解常见 3D 文件格式及其特点。掌握使用 GLTFLoader 加…...

编程日记 2025/8/22 15:50:05

【C++算法】50.分治_归并_翻转对

文章目录题目链接：题目描述：解法C 算法代码：图解题目链接： 493. 翻转对题目描述： 解法分治策略一：计算当前元素cur1后面，有多少元素的两倍比我cur1小（降序） 利用单…...

编程日记 2025/8/21 12:17:41

观察者模式详解实战

观察者模式深度解析与实战案例一、传统观察者模式痛点分析强制接收所有通知：观察者被迫处理无关事件事件信息不透明：状态变更缺乏上下文信息类型安全缺失：需要手动进行类型判断和转换扩展成本高：新增事件类型需要修改接口 …...

编程日记 2025/8/20 10:23:24

Light RPC：一款轻量高效的Java RPC框架实践指南

Light RPC：一款轻量高效的Java RPC框架实践指南一、框架简介二、快速入门1. 环境准备2. 服务端配置2.1 添加依赖2.2 YAML配置2.3 接口与实现 3. 客户端配置3.1 添加依赖3.2 YAML配置3.3 客户端调用三、核心设计解析四、适用场景与优势对比五、总结一、框架简介 …...

编程日记 2025/8/21 9:29:47

国内MCP资源网站有哪些？MCP工具上哪找？

在人工智能领域，MCP（模型上下文协议）正逐渐成为连接 AI 模型与外部世界的重要桥梁。而AIbase （https://www.aibase.com/zh/repos/topic/mcp）正是探索 MCP 生态的绝佳平台，它为开发者和研究者提供了一个集中…...

编程日记 2025/8/23 1:51:39

在PowerBI中通过比较日期实现累加计算

#表格数据# 日期数量2025/4/712025/4/822025/4/932025/4/1042025/4/1152025/4/1262025/4/1372025/4/1482025/4/1592025/4/16102025/4/1711 #新建计算列# 列 SUMX(FILTER(表格数据,[日期]<EARLIER([日期])),表格数据[数量])...

编程日记 2025/8/22 1:47:03

十四届蓝桥杯Java省赛 B组(持续更新..)

十四届蓝桥杯Java省赛 B组第一题：阶乘求和 📖 📚阶乘求和第二题：幸运数字 📖 📚幸运数字第三题：数组分割 📖 📚数组分割说是考动态规划，但没有用…...

编程日记 2025/8/22 22:05:18

NO.73十六届蓝桥杯备战|搜索算法-剪枝与优化-记忆化搜索|数的划分|小猫爬山|斐波那契数|Function|天下第一|滑雪(C++)

剪枝与优化剪枝，形象得看，就是剪掉搜索树的分⽀，从⽽减⼩搜索树的规模，排除掉搜索树中没有必要的分⽀，优化时间复杂度。在深度优先遍历中，有⼏种常⻅的剪枝⽅法排除等效冗余如果在搜索过程中&#xf…...

编程日记 2025/8/17 23:25:48

深度学习总结（2）

神经网络的数据表示在前面的例子中，我们的数据存储在多维NumPy数组中，也叫作张量（tensor）。一般来说，目前所有机器学习系统都使用张量作为基本数据结构。张量对这个领域非常重要，重要到TensorFlow都以它来命名。究竟什么是张量呢？张量这一概念的核心在于，它是一个数…...

编程日记 2025/8/21 23:35:08

STM32H7 ADC最大速率

STM32H7 ADC最大速率硬件限制封装在手册 AN5354 中说明了不同封装、不同分辨率的最大速率是不一致的； BGA封装的ADC的速度要快于LQFP封装的速度的； 分辨位数越高、转换时间越长，所以ADC的最大采样速率也就最低； ADC通道模…...

编程日记 2025/8/22 19:39:15

MVC模型

MVC模型（Model模型，View视图，Controller控制器） 逻辑执行流程： JSP（View）----》Servlet（Controller）----》service，dao，pojo（Model&a…...

编程日记 2025/8/22 2:28:00

OpenGL ES -＞ SurfaceView + EGL实现立方体纹理贴图+透视效果

XML文件 <?xml version"1.0" encoding"utf-8"?> <com.example.myapplication.MySurfaceView xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"…...

编程日记 2025/8/19 10:20:24

arthas线上不停机修改bug

安装arthas wget https://alibaba.github.io/arthas/arthas-boot.jar启动： java -jar arthas-boot.jar 启动失败使用jps也没查到对应的进程发生错误信息使用进程id启动，报错进程id查看使用命令： ps -ef | grep java 详情&#xf…...

编程日记 2025/8/17 23:30:22

#关于require 与 import 相关了解

📦 require 在前端项目中使用，属于 CommonJS 模块规范的语法，主要用于 Node.js 环境。早期的前端模块打包工具（如 Webpack）会兼容这种写法，但在现代前端项目（如 Vue、React）中&…...

编程日记 2025/8/22 21:13:23

【算法应用】基于融合A星-粒子群算法求解六边形栅格地图路径规划

目录 1.粒子群算法PSO原理2.结果展示3.参考文献4.代码获取 1.粒子群算法PSO原理【智能算法】粒子群算法（PSO）原理及实现六边形栅格地图分析一下地图： 六边形栅格地图上移动可以看做6领域运动，偶数列与奇数列移动方式有所差异…...

编程日记 2025/8/20 11:45:05

【深度学习】【目标检测】【Ultralytics-YOLO系列】YOLOV3源码整体结构解析

【深度学习】【目标检测】【Ultralytics-YOLO系列】YOLOV3源码整体结构解析文章目录【深度学习】【目标检测】【Ultralytics-YOLO系列】YOLOV3源码整体结构解析前言代码结构整体data文件结构模型训练超参数配置文件解析数据集配置文件解析 models文件结构utils文件结构runs文…...

编程日记 2025/8/19 17:48:08

R语言：气象水文领域的数据分析与绘图利器

R 语言是一门由统计学家开发的用于统计计算和作图的语言（a Statistic Language developed for Statistic by Statistician），由 S 语言发展而来，以统计分析功能见长。R 软件是一款集成了数据操作、统计和可视化功能的优秀的开源软…...

编程日记 2025/8/19 18:40:59

R语言空间水文气象数据分析：从插值到动态可视化

一、R简介与R 在气象水文中的应用 R语言与 R软件简介R 在各行业的应用概览R 与其他语言的比较及其在数据分析与作图上的优势 R 在地学中的应用以及R 在气象水文中的应用二、出发之前——用什么来同时记录我们的数据、代码及结果——Rmd与 knitr介绍介绍一种方便的理念——…...

编程日记 2025/8/17 23:37:41

在Unity中实现《幽灵行者》风格的跑酷动作

基础设置角色控制器选择： 使用Character Controller组件或Rigidbody Capsule Collider 推荐使用Character Controller以获得更精确的运动控制输入系统： 使用Unity的新输入系统(Input System Package)处理玩家输入滑铲实现 public class Slide…...

编程日记 2025/8/21 4:32:19

如何根据设计稿进行移动端适配：全面详解

文章目录

1. 理解设计稿

1.1 设计稿的尺寸

1.2 设计稿的单位

2. 移动端适配的核心技术

2.1 使用 viewport 元标签

2.1.1 代码示例

2.1.2 参数说明

2.2 使用相对单位

2.2.1 rem 单位

实现代码

2.2.2 vw 和 vh 单位

实现代码

2.3 使用媒体查询（Media Queries）

2.3.1 实现代码

2.3.2 断点设置

2.4 使用 Flexbox 和 Grid 布局

2.4.1 Flexbox 示例

2.4.2 Grid 示例

2.5 图片和媒体的适配

2.5.1 srcset 和 sizes

实现代码

2.5.2 picture 标签

实现代码

3. 实际开发中的适配流程

3.1 步骤 1：分析设计稿

3.2 步骤 2：设置 viewport

3.3 步骤 3：选择单位

3.4 步骤 4：编写响应式样式

3.5 步骤 5：测试与调试

4. 总结

相关文章：

2.1 使用 `viewport` 元标签

2.2.1 `rem` 单位

2.2.2 `vw` 和 `vh` 单位

2.5.1 `srcset` 和 `sizes`

2.5.2 `picture` 标签

3.2 步骤 2：设置 `viewport`