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

Web前端—移动Web第四天（vw适配方案、vw和vh的基本使用、综合案例-酷我音乐）

news 2026/5/7 1:13:00

版本说明

当前版本号[20231122]。

版本	修改说明
20231122	初版

版本说明
目录
移动 Web 第四天
- 01-vw适配方案
- - vw和vh基本使用
  - vw布局
  - vh布局
  - 混用问题
- 02-综合案例-酷我音乐
- - 准备工作
  - 头部布局
  - 头部内容
  - 搜索区域
  - banner 区域
  - 标题公共样式
  - 排行榜内容
  - 推荐歌单布局
  - 推荐歌单内容
  - 下载区域
  - 头部固定

移动 Web 第四天

01-vw适配方案

vw和vh基本使用

vw和vh是相对单位，相对视口尺寸计算结果，可以直接实现移动端适配效果。

vw：viewport width（1vw = 1/100视口宽度）
vh：lviewport height ( 1vh = 1/100视口高度 )

vw布局

vw单位的尺寸 = px 单位数值 / ( 1/100 视口宽度 )

确定设计稿对应的vw尺寸（1/100视口宽度）
1. 查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定 vw 尺寸 （1/100 视口宽度
vw单位的尺寸 = px 单位数值 / ( 1/100 视口宽度 )

vh布局

确定设计稿对应的vh尺寸（1/100视口高度）
1. 查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定 vh 尺寸 （1/100 视口高度）
vh单位的尺寸 = px 单位数值 / ( 1/100 视口高度 )

混用问题

注：是否可以 vw 和 vh 混用呢？

vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形

02-综合案例-酷我音乐

1682666610217

准备工作

1682666716132

HTML 结构

<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="./css/index.css">

less 样式

要注意：// out: ../css/要在第一行，才会生效。如果放到非第一行去， css 文件就会与 less文件放在一起。

// out: ../css/@import "./base";

头部布局

HTML 结构

<!-- 头部 -->
<header><div class="left">left</div><a href="#">下载APP</a>
</header>

less 样式

body {background-color: #f9fafb;
}@vw:3.75vw;// 头部
header {display: flex;justify-content: space-between;align-items: center;padding: 0 (15 / @vw);height: (50 / @vw);background-color: #fff;
}

1、把头部区域圈出来。

<body><!-- 头部 --><header>1</header>
</body>

body{background-color: #f9fafb;
}// 头部
header{background-color: #fff;
}

2、给头部区域加上内外边距。

@vw:3.75vw;
// 头部
header{padding: 0 (15 / @vw);height: (50 / @vw);background-color: #fff;
}

3、分成左右两部分，并设置Flex容器中项目的垂直对齐方式。

<!-- 头部 --><header><div class="left">left</div><a href="#">下载APP</a></header>

@vw:3.75vw;
// 头部
header{display: flex;justify-content: space-between;align-items: center;padding: 0 (15 / @vw);height: (50 / @vw);background-color: #fff;
}

头部内容

less 样式

header {// 左边.left {width: (235 / @vw);height: (50 / @vw);background-image: url(../assets/head.png);background-size: contain;background-repeat: no-repeat;}a {width: (80 / @vw);height: (30 / @vw);background-color: #ffe31b;border-radius: (15 / @vw);text-align: center;line-height: (30 / @vw);font-size: (14 / @vw);}
}

1、添加上背景图片，并设置背景图像的尺寸和重复方式。

背景图像会保持其原始尺寸，同时可能被拉伸或压缩以适应容器的大小。
设置为 no-repeat 时，背景图像不会在水平方向上重复，也不会在垂直方向上重复。这意味着背景图像只会显示一次，并且不会随着容器的大小变化而自动调整。

// 左边.left{height: (50 / @vw);width: (235 / @vw);background-image: url(../assets/head.png);background-size: contain;background-repeat: no-repeat;}

2、设置“下载APP”的背景框，让文本会在水平方向上居中对齐。

 // 右边a{width: (80 / @vw);height: (30 / @vw);background-color: #ffe31b;text-align: center;line-height: (30 / @vw);border-radius: (15 / @vw);font-size: (14 / @vw);}

搜索区域

HTML 结构

<!-- 搜索 -->
<div class="search"><div class="txt"><span class="iconfont icon-sousuo"></span><span>搜索你想听的歌曲</span></div>
</div>

less 样式

// 搜索
.search {padding: (10 / @vw) (15 / @vw);height: (52 / @vw);// background-color: pink;.txt {height: (32 / @vw);background-color: #f2f4f5;border-radius: (16 / @vw);text-align: center;line-height: (32 / @vw);color: #a1a4b3;font-size: (14 / @vw);.iconfont {font-size: (16 / @vw);}}
}

1、列出搜索区域。

// 搜索区域
.search{padding: (10 / @vw) (15 / @vw);height: (42 / @vw);background-color: pink;
}

2、对文本的区域设置边距。

 .txt{height: (32 / @vw);background-color: #f2f4f5;border-radius: (16 / @vw);}

3、在框内添加字体图标和搜索提示词。

<!-- 搜索区域 --><div class="search"><div class="txt"><span class="iconfont icon-sousuo"></span><span>搜索你想听的歌曲</span></div></div>

.txt{height: (32 / @vw);background-color: #f2f4f5;border-radius: (16 / @vw);text-align: center;line-height: (32 / @vw);color: #a1a4b3;}

4、设置字体图标的大小。

.txt{height: (32 / @vw);background-color: #f2f4f5;border-radius: (16 / @vw);text-align: center;line-height: (32 / @vw);color: #a1a4b3;font-size: (14 / @vw);.iconfont{font-size: (16 / @vw);}}

banner 区域

HTML 结构

<!-- banner -->
<div class="banner"><ul><li><a href="#"><img src="./assets/banner01.jpeg" alt=""></a></li></ul>
</div>

less 样式

// banner
.banner {padding: 0 (15 / @vw);height: (108 / @vw);// background-color: pink;ul {li {width: (345 / @vw);height: (108 / @vw);img {width: 100%;height: 100%;// cover完全覆盖// 缩放img，图片比例跟父级盒子比例不同，避免图片挤压变形object-fit: cover;border-radius: (5 / @vw);}}}
}

1、给banner区域腾出位置。

 <!-- banner区域 --><div class="banner">1</div>

// banner区域
.banner{padding: 0 (15 / @vw);height: (108 / @vw);background-color: pink;
}

2、插入图片，并且让图片完全覆盖，当图片比例与父级盒子比例不同时，就缩放img，避免图片因挤压而产生变形。

<!-- banner区域 --><div class="banner"><ul><li><a href="#"><img src="./assets/banner01.jpeg" alt=""></a></li></ul></div>

// banner区域
.banner{padding: 0 (15 / @vw);height: (108 / @vw);background-color: pink;ul{li{width: (345 / @vw);height: (108 / @vw);img{width: 100%;height: 100%;// cover代表图片是完全覆盖的// 当图片比例与父级盒子比例不同时，缩放img，避免图片挤压变形object-fit: cover;}}}
}

注：

  // cover代表图片是完全覆盖的// 当图片比例与父级盒子比例不同时，缩放img，避免图片挤压变形object-fit: cover;

3、再把背景色去掉。

 border-radius: (5 / @vw);

标题公共样式

HTML 结构

<!-- 排行榜 -->
<div class="list"><!-- 标题 --><div class="title"><h4>酷我排行榜</h4><a href="#">更多<span class="iconfont icon-right"></span></a></div>
</div>

less 样式

// 排行榜
.list {margin-top: (20 / @vw);padding: 0 (15 / @vw);
}// 标题 → 公共样式
.title {display: flex;justify-content: space-between;margin-bottom: (16 / @vw);line-height: (25 / @vw);h4 {font-size: (20 / @vw);}a {font-size: (12 / @vw);color: #a1a4b3;}
}

1、对排行榜区域进行设置。

 <!-- 排行榜 --><div class="list"><!-- 标题 --><div class="title"><h4>酷我排行榜</h4><a href="#">更多<span class="iconfont icon-right"></span></a></div></div>

// 排行榜
.list{margin-top: (20 / @vw);padding: 0 (15 / @vw);
}

2、设置排行榜标题区域为水平对齐方式。元素之间会平均分配空间，并且两端的元素分别靠近容器的开始和结束位置。

// 标题
.title{display: flex;justify-content: space-between;margin-bottom: (16 / @vw);
}

3、改变文字的样式。

// 标题
.title{display: flex;justify-content: space-between;margin-bottom: (16 / @vw);line-height: (25 / @vw);h4{font-size: 20px;}a{font-size: 12px;color: #a1a4b3;text-align: center;}
}

排行榜内容

HTML 结构

<!-- 内容 -->
<div class="content"><ul><li><div class="pic"><img src="./assets/icon_rank_hot.png" alt=""></div><div class="txt"><a href="#" class="more">酷我热歌榜<span class="iconfont icon-right"></span></a><a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a><a href="#">2.就让这大雨全都落下 - 容祖儿</a><a href="#">3.缺氧 - 轩姨（相信光）</a></div></li><li><div class="pic"><img src="./assets/icon_rank_new.png" alt=""></div><div class="txt"><a href="#" class="more">酷我新歌榜<span class="iconfont icon-right"></span></a><a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a><a href="#">2.就让这大雨全都落下 - 容祖儿</a><a href="#">3.缺氧 - 轩姨（相信光）</a></div></li><li><div class="pic"><img src="./assets/icon_rank_rise.png" alt=""></div><div class="txt"><a href="#" class="more">酷我飙升榜<span class="iconfont icon-right"></span></a><a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a><a href="#">2.就让这大雨全都落下 - 容祖儿</a><a href="#">3.缺氧 - 轩姨（相信光）</a></div></li></ul>
</div>

less 样式

// 排行榜
.list {margin-top: (20 / @vw);padding: 0 (15 / @vw);li {display: flex;margin-bottom: (16 / @vw);height: (105 / @vw);background-color: #fff;border-radius: (10 / @vw);.pic {margin-right: (20 / @vw);img {width: (105 / @vw);height: (105 / @vw);border-radius: (10 / @vw);}}.txt {a {display: block;font-size: (12 / @vw);color: #a1a4b3;line-height: 1.8;}.more {font-size: (14 / @vw);color: #333;.iconfont {font-size: (16 / @vw);}}}}
}

1、设置三个li标签。

 <!-- 排行榜 --><div class="list"><!-- 标题 --><div class="title"><h4>酷我排行榜</h4><a href="#">更多<span class="iconfont icon-right"></span></a></div><!-- 内容 --><div class="content"><ul><li>1</li><li>2</li><li>3</li></ul></div></div>

// 排行榜
.list{margin-top: (20 / @vw);padding: 0 (15 / @vw);li{margin-bottom: (16 / @vw);height: (105 / @vw);background-color: #fff;border-radius: (10 / @vw);}
}

2、将每个li标签分为两部分，图片及文字。

<li><div class="pic">1</div><div class="txt">2</div></li>

li{display: flex;margin-bottom: (16 / @vw);height: (105 / @vw);background-color: #fff;border-radius: (10 / @vw);.pic{margin-right: (20 / @vw);}}

3、插入图片。

<li><div class="pic"><img src="./assets/icon_rank_hot.png" alt=""></div><div class="txt">2</div></li>

 .pic{margin-right: (20 / @vw);img{width: (105 / @vw);height: (105 / @vw);border-radius: (10 / @vw);}}

4、将文字区域设置成 display: block; ，是为了让每个 a 标签都可以换行。

<li><div class="pic"><img src="./assets/icon_rank_hot.png" alt=""></div><div class="txt"><a href="#" class="more">酷我热歌榜<span class="iconfont icon-right"></span></a><a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a><a href="#">2.就让这大雨全都落下 - 容祖儿</a><a href="#">3.缺氧 - 轩姨（相信光）</a></div></li>

.txt{a{display: block;}}

5、改变右边区域的样式。

.txt{a{display: block;line-height: 1.8;font-size: (12 / @vw);color: #a1a4b3;}.more{font-size: (14 / @vw);color: #333;.iconfont{font-size: (16 / @vw);}}}

下载区域

HTML 结构

<!-- 安装，下载 -->
<div class="download"><img src="./assets/logo.png" alt=""><p>安装酷我音乐 发现更多好音乐</p><span class="iconfont icon-right"></span>
</div>

less 样式

// 下载
.download {position: fixed;left: (15 / @vw);bottom: (30 / @vw);display: flex;align-items: center;padding: 0 (10 / @vw) 0 (15 / @vw);width: (345 / @vw);height: (45 / @vw);background-color: #fff;border-radius: (22 / @vw);img {margin-right: (10 / @vw);width: (36 / @vw);height: (36 / @vw);}p {flex: 1;font-size: (14 / @vw);}span {width: (32 / @vw);height: (32 / @vw);background-color: #f2f3f5;border-radius: 50%;text-align: center;line-height: (32 / @vw);font-size: (16 / @vw);}
}

1、给下载区域描出框的位置。

<!-- 下载区域 --><div class="download">1</div>

// 下载区域
.download{width: (345 / @vw);height: (45 / @vw);padding: 0 (10 / @vw) 0 (15 / @vw);color: #333;
}

2、进一步修改细节。

// 下载区域
.download{position: fixed;left: (15 / @vw);bottom: (30 / @vw);width: (345 / @vw);height: (45 / @vw);padding: 0 (10 / @vw) 0 (15 / @vw);color: #fff;
}

3、设置元素的边框圆角半径。

background-color: #fff;
border-radius: (22 / @vw);

4、将区域中的图片、文字和字体图标加上去。

 <!-- 下载区域 --><div class="download"><img src="./assets/logo.png" alt=""><p>安装酷我音乐 发现更多好音乐</p><span class="iconfont icon-right"></span></div>

.download{display: flex;……img{width: (36 / @vw);height: (36 / @vw);}
}

5、设置区域中的内容垂直对齐。

// 下载区域
.download{……align-items: center;img{width: (36 / @vw);height: (36 / @vw);margin: 0 (10 / @vw) 0 0;}
}

6、修改文字的大小。flex: 1;为设置Flex容器中项目的弹性伸缩比例。当设置为 1 时，项目会平均分配可用空间。在这里当分配好图标和字体图标完后，剩下的空间均为 p 所用。

p{flex: 1;font-size: (14 / @vw);}

7、设置"span"的元素样式为一个圆形的容器，并具有指定的宽度、高度、背景颜色、边框圆角半径、行高和文本对齐方式。

span{width: (32 / @vw);height: (32 / @vw);background-color: #f2f3f5;border-radius: 50%;line-height: (32 / @vw);text-align: center;}

头部固定

问题：

1、宽度不够

2、搜索栏没了

less 样式

// 头部
header {position: fixed;left: 0;top: 0;display: flex;justify-content: space-between;align-items: center;padding: 0 (15 / @vw);// 固定定位的盒子，宽度靠内容撑开，希望宽度100%width: 100%;height: (50 / @vw);background-color: #fff;
}// 搜索
.search {// 头部固定定位，脱标不占位，搜索去最顶了，加上外边距挤下来即可margin-top: (50 / @vw);padding: (10 / @vw) (15 / @vw);height: (52 / @vw);
}

1、设置头部固定。

header{position: fixed;left: 0;top: 0;// 固定定位的盒子，宽度靠内容撑开，所以我们希望宽度为100%width: 100%;……
}

2、我们会发现，搜索框没有显示出来了，是因为固定头部的区域把其给覆盖了。我们只需要添加上边距，让搜索框下来，这样我们就能看到了。

// 搜索区域
.search{// 头部固定定位，拖标不定位，搜索去最顶处了，加上外边距挤下来即可margin-top: (50 / @vw);……
}

Web前端—移动Web第四天（vw适配方案、vw和vh的基本使用、综合案例-酷我音乐）

版本说明当前版本号[20231122]。版本修改说明20231122初版目录文章目录版本说明目录移动 Web 第四天01-vw适配方案vw和vh基本使用vw布局vh布局混用问题 02-综合案例-酷我音乐准备工作头部布局头部内容搜索区域banner 区域标题公共样式排行榜内容推荐歌单布局推荐歌单内…...

编程日记 2023/11/22 22:14:53

报错注入 [极客大挑战 2019]HardSQL1

打开题目输入1或者1"，页面均回显NO,Wrong username password！！！ 那我们输入1 试试万能密码 1 or 11 # 输入1 and 12 # 输入1 union select 1,2,3 # 输入1 ununionion seselectlect 1,2,3 # 输入1 # 输入1# 页面依旧回…...

编程日记 2023/11/22 22:13:52

【MATLAB源码-第83期】基于matlab的MIMO中V-BALST结构ZF和MMSE检测算法性能误码率对比。

操作环境： MATLAB 2022a 1、算法描述在多输入多输出（MIMO）通信系统中，V-BLAST（垂直波束形成层间空间时间编码技术）是一种流行的技术，用于提高无线通信的数据传输速率和容量。它通过在不同的…...

编程日记 2023/11/22 22:12:51

Android13 新增 Stable AIDL接口

问题描述： 我需要在netd aidl 中添加新的接口： 设置网卡MAC地址： void setHardwareAddress(in utf8InCpp String iface, in utf8InCpp String hwAddr); 背景： Android 10 添加了对稳定的 Android 接口定义语言 (AIDL) 的支持&…...

编程日记 2023/11/22 22:10:49

Postman API Enterprise 10.18.1 Crack

适合您企业的 Postman API 平台掌控您的 API 环境。构建更好的 API。加快产品开发。无论您处于 API 之旅的哪个阶段，Postman 都会为您提供帮助想让您团队的 API 更容易被发现吗？希望减少开发和质量检查之间的滞后时间？想要更快地让新开发…...

编程日记 2023/11/22 22:09:48

电脑内存升级

ddr代兼容自从DDR内存时代开启之后，只要满足内存的插槽规格相同(DDR3或DDR4或DDR5即为内存规格)这一条件，不同品牌、不同频率以及不同容量的茶品都可以一起使用，除了品牌和容量的影响之外，不同频率的搭配可能会造成性能方面的影…...

编程日记 2023/11/22 22:08:46

在PHP里面支持利用Excel的BDD，也支持利用Excel进行参数化测试 ExcelBDD Use Excel file as BDD feature file, get example data from Excel files, support automation tests. Features The main features provided by this library are: Read test data acco…...

编程日记 2023/11/22 22:07:45

C++静态链接库的生成以及使用

目录一.前言二.生成静态链接库三.使用静态链接库四.其他一.前言这篇文章简单讨论一下VS如何生成和使用C静态链接库，示例使用VS2022环境。二.生成静态链接库先创建C项目-静态库然后将默认生成的.h和.cpp文件清理干净，当然你也可以选择保留。然…...

编程日记 2023/11/22 22:06:43

【2024系统架构设计】系统架构设计师第二版-未来信息综合技术

目录一信息物理系统二人工智能三机器人技术四边缘计算五数字孪生体...

编程日记 2023/11/22 22:04:41

JavaFX修改软件图标

JavaFX默认使用jdk的程序图片显示，可以通过以下代码进行修改设置 stage.getIcons().add(new Image("static/icon.png")); static/icon.png改为自己图片路径这里可以使用相对路径和绝对路径，看自己需求设置例： import javafx.a…...

编程日记 2023/11/22 22:03:40

Linux ps -ef|grep去除 grep --color=auto信息

linux 监控进程判断是否启动可通过该指令实现 ps -ef|grep java指令结果为 # -v 参数有过滤作用 ps -ef|grep java |grep -v grep...

编程日记 2023/11/22 22:01:38

jQuery的学习(一篇文章齐全)

目录 Day29 jQuery 1、jQuery介绍 2、jQuery的选择器 2.1、直接查找 2.2、导航查找 3、jQuery的绑定事件案例1：绑定取消事件案例2：模拟事件触发 4、jQuery的操作标签 tab切换案例jQuery版本： 案例1： 案例2&#xff…...

编程日记 2023/11/22 22:00:37

注塑行业各类业务流程图（系统化）

...

编程日记 2023/11/22 21:58:36

Android Studio 安装及使用

🍓 简介：java系列技术分享(👉持续更新中…🔥) 🍓 初衷:一起学习、一起进步、坚持不懈 🍓 如果文章内容有误与您的想法不一致,欢迎大家在评论区指正🙏 🍓 希望这篇文章对你有所帮助,欢…...

编程日记 2023/11/22 21:57:35

计算机网络的OSI七层模型

目录 1、OSI七层模型是什么 1.1 物理层（Physical Layer） 1.2 数据链路层（Data Link Layer） 1.3 网络层（Network Layer） 1.4 传输层（Transport Layer） 1.5 会话层（S…...

编程日记 2023/11/22 21:56:33

如何一次性解压多个文件

第一步：多选压缩包第二步：右键解压即可一句话，单个怎么解压，多个就怎么解压，只不过先选中参考：如何一次性解压多个文件...

编程日记 2023/11/22 21:55:32

类和对象学习笔记

类和对象类的定义this指针类的6个默认成员函数构造函数析构函数拷贝构造函数赋值运算符重载赋值运算符重载运算符重载const成员取地址操作符重载const取地址操作符重载初始化列表explicit关键字static成员匿名对象友元内部类拷贝对象时编译器的优化类的定义 c类的定义形式…...

编程日记 2023/11/22 21:54:30

Linux程序之可变参数选项那些事！

一、linux应用程序如何接收参数？ 1. argc、argv Linux应用程序执行时，我们往往通过命令行带入参数给程序，比如 ls /dev/ -l 其中参数 /dev/ 、-l都是作为参数传递给命令 ls 应用程序又是如何接收这些参数的？ 通常应用程序都…...

编程日记 2023/11/22 21:53:29

【1day】泛微e-office OA系统user_page接口未授权访问漏洞学习

注：该文章来自作者日常学习笔记，请勿利用文章内的相关技术从事非法测试，如因此产生的一切不良后果与作者无关。目录一、漏洞描述二、影响版本三、资产测绘四、漏洞复现...

编程日记 2023/11/22 21:52:29

Midjourney绘画提示词Prompt参考教程

Midjourney绘画提示词Prompt参考教程：无需魔法使用。一、AI工具 SparkAi： SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统，支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常…...

编程日记 2023/11/22 21:51:28

告别原生Socket API：用sockpp 0.8.1在C++中快速构建TCP客户端/服务器（附完整代码）

告别原生Socket API：用sockpp 0.8.1在C中快速构建TCP客户端/服务器在C网络编程领域，原生Socket API就像一把需要反复打磨的双刃剑——功能强大但使用笨拙。每次创建TCP连接时，开发者不得不面对套接字描述符的手动管理、平台特定的错误处理&a…...

编程新知 2026/5/7 1:07:59

轻量级进程守护工具 openclaw-keep-alive 实战指南

1. 项目概述与核心价值最近在折腾一些需要长期稳定运行的后台服务时，遇到了一个老生常谈但又非常棘手的问题：如何确保一个进程或服务在意外崩溃后能自动重启，以及在服务器重启后能自动拉起？这个问题在个人项目、小型服务器运维乃至…...

编程新知 2026/5/7 1:03:46

RV1126驱动移植笔记：我是如何搞定JD9366触摸屏的（从源码分析到DTS调试）

RV1126驱动移植实战：JD9366触摸屏从源码解析到DTS调试全记录第一次拿到JD9366触摸屏驱动源码时，我盯着满屏的寄存器定义和i2c传输函数发了半小时呆——这堆代码到底该怎么塞进RV1126的内核？为什么别人的移植笔记总是轻描淡写地略过最关键的调…...

编程新知 2026/5/6 23:48:44

【2026】新大纲普通话考试真题题库50套（PDF电子版）

2026年国家普通话水平测试依据《国家普通话水平测试大纲（2024修订版）》，新版考试标准自2024年1月1日起实施，2026年考试将全面执行新大纲要求。核心测试内容调整测试项目数量考察重点朗读短文50篇声调准确性、语流音变规范性…...

编程新知 2026/5/6 23:26:17

【油浸式变压器】在不同气候条件下的油浸式变压器的能量极限研究附Matlab代码

✅作者简介：热爱科研的Matlab仿真开发者，擅长毕业设计辅导、数学建模、数据处理、程序设计科研仿真。 🍎完整代码获取定制创新论文复现点击：Matlab科研工作室 👇 关注我领取海量matlab电子书和数学建模资料 &am…...

编程新知 2026/5/6 22:24:53

从零到可运行：手把手在Ubuntu 20.04上为YOLOv5搭建TensorRT加速环境（含模型转换实战）

从零到可运行：手把手在Ubuntu 20.04上为YOLOv5搭建TensorRT加速环境（含模型转换实战） 在计算机视觉领域，YOLOv5凭借其出色的实时检测性能成为工业界的热门选择。但当我们将训练好的模型部署到实际生产环境时，往往会面临…...

编程新知 2026/5/6 20:32:12

保姆级教程：用Linux Mint打造高效开发环境，从系统设置到顺手工具

从零构建Linux Mint高效开发环境：系统调优与生产力工具全指南刚接触Linux Mint的开发者常会陷入两难——这个以优雅著称的发行版虽然开箱即用，但默认配置往往无法满足高强度开发需求。我曾见证一位同事在项目deadline前夜，因包管理器卡在海外…...

编程新知 2026/5/6 20:23:56

通过taotokencli一键配置团队开发环境中的大模型密钥

通过 Taotoken CLI 一键配置团队开发环境中的大模型密钥 1. 安装 Taotoken CLI 工具 Taotoken CLI 提供两种安装方式，适合不同使用场景。对于需要频繁调用 CLI 的团队成员，推荐全局安装： npm install -g taotoken/taotoken对于临时使用或项…...

编程新知 2026/5/6 19:22:39

制造业AISMM落地黄金窗口期仅剩11个月？——基于《智能制造能力成熟度评估标准（GB/T 39116-2020）》2025年强制升级倒计时预警

更多请点击： https://intelliparadigm.com 第一章：AISMM模型在制造业落地的战略紧迫性与政策动因全球制造范式加速转向智能自主化当前，工业4.0进入深水区，传统MES与APS系统在应对多品种、小批量、高柔性订单时普遍出现响应延迟…...

编程新知 2026/5/6 18:22:23

终极GPU显存稳定性测试指南：memtest_vulkan免费硬件诊断利器

终极GPU显存稳定性测试指南：memtest_vulkan免费硬件诊断利器【免费下载链接】memtest_vulkan Vulkan compute tool for testing video memory stability 项目地址: https://gitcode.com/gh_mirrors/me/memtest_vulkan memtest_vulkan是一款基于Vulkan计算AP…...

编程新知 2026/5/6 17:58:43