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

【CSS in Depth 2 精译_045】7.1 CSS 响应式设计中的移动端优先设计原则（上）

news 文章来源：https://blog.csdn.net/frgod/article/details/142718600 2025/5/10 15:49:40

当前内容所在位置（可进入专栏查看其他译好的章节内容）

  • 第一章 层叠、优先级与继承（已完结）
    • 1.1 层叠
    • 1.2 继承
    • 1.3 特殊值
    • 1.4 简写属性
    • 1.5 CSS 渐进式增强技术
    • 1.6 本章小结
  • 第二章 相对单位（已完结）
    • 2.1 相对单位的威力
    • 2.2 em 与 rem
    • 2.3 告别像素思维
    • 2.4 视口的相对单位
    • 2.5 无单位的数值与行高
    • 2.6 自定义属性
    • 2.7 本章小结
  • 第三章 文档流与盒模型（已完结）
    • 3.1 常规文档流
    • 3.2 盒模型
    • 3.3 元素的高度
    • 3.4 负的外边距
    • 3.5 外边距折叠
    • 3.6 容器内的元素间距问题
    • 3.7 本章小结
  • 第四章 Flexbox 布局（已完结）
    • 4.1 Flexbox 布局原理
    • 4.2 弹性子元素的大小
    • 4.3 弹性布局的方向
    • 4.4 对齐、间距等细节处
    • 4.5 本章小结
  • 第五章 网格布局（已完结）
    • 5.1 构建基础网格
    • 5.2 网格结构剖析 （上）
      • 5.2.1 网格线的编号（下）
      • 5.2.2 网格与 Flexbox 配合（下）
    • 5.3 两种替代语法
      • 5.3.1 命名网格线
      • 5.3.2 命名网格区域
    • 5.4 显式网格与隐式网格（上）
      • 5.4.1 添加变化 （中）
      • 5.4.2 让网格元素填满网格轨道（下）
    • 5.5 子网格（全新增补内容）
    • 5.6 对齐相关的属性
    • 5.7 本章小结
  • 第六章 定位与堆叠上下文（已完结）
    • 6.1 固定定位
      • 6.1.1 创建一个固定定位的模态对话框
      • 6.1.2 在模态对话框打开时防止屏幕滚动
      • 6.1.3 控制定位元素的大小
    • 6.2 绝对定位
      • 6.2.1 关闭按钮的绝对定位
      • 6.2.2 伪元素的定位问题
    • 6.3 相对定位
      • 6.3.1 创建下拉菜单（上）
      • 6.3.2 创建 CSS 三角形（下）
    • 6.4 堆叠上下文与 z-index
      • 6.4.1 理解渲染过程与堆叠顺序（上）
      • 6.4.2 用 z-index 控制堆叠顺序（上）
      • 6.4.3 深入理解堆叠上下文（下）
    • 6.5 粘性定位
    • 6.6 本章小结
  • 第七章 响应式设计（概述）
    • 【7.1 移动端优先设计原则】（上篇） ✔️​
    • 7.2 媒体查询（精译中 ⏳）

文章目录

    • 7.1 移动端优先设计原则 Mobile first

《CSS in Depth》新版封面

《CSS in Depth》新版封面

译者按
铺垫了好几天，今天终于要开始学习 CSS 响应式设计的第一个大原则了——移动端优先（mobile first）。第七章有个特点——每一节篇幅都比较长，因为涉及整个页面的谋篇布局和响应式处理，不再仅仅聚焦于一个个具体的知识点上，学习时一定要在头脑里构建一个宏观的视角。篇幅原因，本节拟分上下两篇进行介绍，本篇为上篇，对应 7.1 节的概述部分。只要跟着作者的思路进行本地实战演练，其实也没有想象中的那么抽象。一起加油吧！

7.1 移动端优先设计原则 Mobile first

响应式设计的第一原则就是 移动端优先（mobile first），顾名思义，就是移动端布局的构建要先于桌面端布局。这是确保两个版本都能生效的最佳方案。

开发移动端页面就像戴着脚镣跳舞：除了屏幕大小受限、网速偏慢外，页面交互所使用的控件（controls）也和 PC 端不太一样：虽然可以打字，但总感觉不太顺手，更没法将鼠标悬停在元素上触发一些特定效果。倘若一开始就设计一个功能全面的网站，然后企图根据移动端的诸多限制削减某些功能，这么做往往都会以失败告终。

而选用移动端优先的方式，则会让您在网站设计之初就开始考虑这些制约因素。一旦解决了移动端的用户体验问题（至少做了相关规划），后续就可以通过“渐进式增强（progressive enhancement）”技术去改善大尺寸屏幕用户的交互体验。

本章最终要实现的页面效果如图 7.1 所示。没错，这就是一版移动端的页面设计。

图 7.1 待实现的移动端页面设计效果图

【图 7.1 待实现的移动端页面设计效果图】

该页面有三个主要部件：标题栏（header）、带了些文字内容的页面主图（hero image）、以及主内容区（main content）。要是轻触或单击页面右上角那个图标，还能弹出一个隐藏菜单（如图 7.2 所示）。这个由三条横线组成的图标因为形似汉堡包中的面包和肉饼，通常也被称作 汉堡（hamburger） 图标。

图 7.2 点击或轻触移动端页面的“汉堡”图标后打开的菜单效果

【图 7.2 点击或轻触移动端页面的“汉堡”图标后打开的菜单效果】

移动端布局一般是很朴素的设计。除了这个带交互效果的菜单，移动端更侧重于内容的展示。相对于大屏有大块的空间来布局标题栏、页面主图和菜单区，移动端用户往往浏览网页的目的性更强。他们很可能与友人在户外玩耍，只想快速查到商店营业时间或者像价格、地址这样的具体信息。

因此移动端的设计就是围绕内容展开的。试想有这么一个 PC 端页面，一边设计为文章内容，另一边则是包含链接的侧边栏，里面还有些不太重要的内容。要是换到移动端来，肯定是希望先看到文章内容。换句话说，我们希望最重要的内容先出现在 HTML 里。这一点恰好与页面可访问性关注的焦点不谋而合：一款读屏工具会优先读到“重要的内容（good stuff）”；或者让用户通过键盘操作，率先获取到这篇文章中的链接，其次才是侧边栏里的。

话虽如此，上述原则也并非放之四海而皆准。比如上面谈到的示例页，尽管页面主图没有下方的内容重要，但它不失为整个页面最抢眼的部分，因此考虑将其留在页面顶部的位置也是合理的。另外，它还带有少量文字内容，浏览起来也不费工夫。

重点

做响应式设计时，一定要确保 HTML 里涵盖了各种屏幕尺寸所需的全部内容。每个屏幕尺寸固然可以有各自的 CSS 样式，但它们必须共享同一份 HTML。

再来看看稍大一些的视口（viewport）该如何设计。屏幕较小的移动端布局固然要先行，但在一头扎进移动端样式之前，大屏需要的整体设计也得做到心里有数，以便在代码结构方面合理决策。

移动端样式一旦就绪，就需要在页面上分别设置一中一大两个 断点（breakpoint）。这可以借助 媒体查询（media queries） 叠加额外的样式来实现。额外引入的这些样式仅对尺寸更大的屏幕生效。

断点的定义

断点（breakpoint） 是一个特殊的临界点。它对应于浏览器的某个宽度或高度。页面样式会在屏幕尺寸跨过该点时发生改变，旨在为当前的屏幕尺寸提供最佳的布局效果。

本章后续还将对这些断点的设置细节做深入考察，现阶段只要知道页面会添加这些断点就行了；此外，还需要考虑在更大尺寸的屏幕下，页面布局一般都会涉及哪些样式调整。图 7.3 显示的是中等屏幕下的页面布局效果：

图 7.3 中等屏幕视口下的页面效果

【图 7.3 中等屏幕视口下的页面效果】

这时的视口尺寸相比移动端稍微多了一些可供发挥的余地。标题栏和页面主图可以设置更大的内边距；各菜单项由于刚好可以在一行铺开，因此也无需隐藏了；汉堡图标因为不用控制菜单的开合，也随即去掉了；而主内容区则可以设计三个等宽列，并让大部分元素填充在距离视口边缘 1em 的范围内。

而尺寸更大的视口则与上面一样，但也可以适当增加页面的外边距，或者让页面主图再大些，如图 7.4 所示：

图 7.4 大尺寸屏幕视口下的页面效果

【图 7.4 大尺寸屏幕视口下的页面效果】

由于要先实现移动端设计，所以才更有必要了解清楚页面在大尺寸屏幕视口下的渲染效果，以便在一开始就确定出合理的 HTML 结构。我们先创建一个新页面和一个新样式表，然后将代码清单 7.1 中的 HTML 标记添加到新页面中。

这些代码看起来很像非响应式设计下的版本，但我针对移动端设计融入了好几处调整，稍后再详述。

代码清单 7.1 响应式设计下的页面 HTML 标记

<!doctype html>
<html lang=”en-US”>
<head><meta charset="UTF-8"><title>Wombat Coffee Roasters</title><link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header id="header" class="page-header"><div class="title"><h1>Wombat Coffee Roasters</h1><div class="slogan">We love coffee</div></div>
</header><nav class="menu" id="main-menu"><button class="menu-toggle" id="toggle-menu"> <!-- 定义移动端菜单的“汉堡”状按钮 -->toggle menu</button><div class="menu-dropdown"> <!-- 在移动端设备上默认隐藏的主菜单 --><ul class="nav-menu"><li><a href="/about.html">About</a></li><li><a href="/shop.html">Shop</a></li><li><a href="/menu.html">Menu</a></li><li><a href="/brew.html">Brew</a></li></ul></div>
</nav>
<aside id="hero" class="hero">Welcome to Wombat Coffee Roasters! We arepassionate about our craft, striving to bring youthe best hand-crafted coffee in the city.
</aside>
<main class="main"><section class="column"><!-- 用于中等尺寸和大尺寸视口的三列布局元素 --><h2 class="subtitle">Single-origin</h2><p>We have built partnerships with small farmsaround the world to hand-select beans at thepeak of season. We then carefully roast in<a href="/batch-size.html">small batches</a>to maximize their potential.</p></section><section class="column"><!-- 用于中等尺寸和大尺寸视口的三列布局元素 --><h2 class="subtitle">Blends</h2><p>Our tasters have put together a selection ofcarefully balanced blends. Our famous<a href="/house-blend.html">house blend</a>is available year round.</p></section><section class="column"><!-- 用于中等尺寸和大尺寸视口的三列布局元素 --><h2 class="subtitle">Brewing Equipment</h2><p>We offer our favorite kettles, Frenchpresses, and pour-over cones. Come to one ofour <a href="/classes.html">brewingclasses</a> to learn how to brew the perfectpour-over cup.</p></section>
</main>
</body>
</html>

上述代码中，切换移动端菜单的按钮位于 nav 元素内。nav-menu 元素放置的位置也恰好可以同时满足移动端和桌面端的设计需求。样式类 main 和 column 则用于桌面端的布局设计（构建新页面时可能一开始还摸不清这些元素的作用，不过不要紧，后面会演示）。

接下来给页面添加样式。先处理比较简单的元素样式，如页面字体、标题、字体颜色等，如图 7.5 所示。因为当前关注的是移动端样式，所以要将浏览器的宽度调小来模拟一个移动设备的尺寸。这样就能看到小屏幕上的页面是什么样的了。

图 7.5 加上简单样式后的移动端页面效果

【图 7.5 加上简单样式后的移动端页面效果】

该页面对应的样式如代码清单 7.2 所示。将它们更新到本地样式表，以建立边框盒模型（border box sizing），并让代码设置的字体和链接颜色生效。该代码用到了第 2 章（第 2.4.1 节）中介绍过的基于视口的响应式字号，并且定义了页面标题即主内容区的相关样式。

代码清单 7.2 给页面设置初始样式

*,
*::before,
*::after {box-sizing: border-box;
}:root {font-size: clamp(0.9rem, 0.5svw + 0.6em, 1.125rem); /* 基础字号会根据视口大小适当缩放（详见第2章内容） */
}body {margin: 0;font-family: Helvetica, Arial, sans-serif;
}a:link {color: #1476b8;font-weight: bold;text-decoration: none;
}
a:visited {color: #1430b8;
}
a:hover {text-decoration: underline;
}
a:active {color: #b81414;
}/* 页面标题栏样式 */
.page-header {padding: 0.4em 1em;background-color: #fff;
}/* 主标题样式 */
.title > h1 {color: #333;text-transform: uppercase;font-size: 1.5rem;margin-block: 0.2em;
}/* 副标题样式 */
.slogan {color: #888;font-size: 0.875em;margin: 0;
}.hero {padding: 2em 1em;text-align: center;background-image: url(coffee-beans.jpg); /* 给页面加上主图 */background-size: 100%;color: #fff;text-shadow: 0.1em 0.1em 0.3em #000; /* 深色的文字阴影效果确保浅色文字在复杂背景中清晰可辨 */
}/* 主内容区样式 */
main {padding: 1em;
}.subtitle {margin-block: 1.5em;font-size: 0.875rem;text-transform: uppercase;
}

上面的样式代码大都比较简单。它将页面标题和正文中的副标题都转换为全大写（all caps），还给页面各组件加上了内外边距，并调整了字号。

主图样式中的 text-shadow 属性可能比较陌生。该属性由若干个属性值构成。由这些值共同定义的文字阴影效果，最终将渲染到目标文字的后面。这些值的前两个，分别代表直角坐标系中的坐标位置，表征该阴影相对于文字位置的偏移量；而 0.1em 0.1em 则表明该阴影将相对于文字稍微往右下方偏移；第三个值（0.3em）为模糊半径，代表该阴影区域的模糊程度。最后的 #000 则指明了阴影的颜色。

译注
代码清单 7.2 第 8 行用到了工具函数 clamp：font-size: clamp(0.9rem, 0.5svw + 0.6em, 1.125rem);。原文只提示参阅第二章，没有解释具体含义，这里补充说明。它表示字号设为 0.5svw + 0.6em，且最小不低于 0.9rem、最大不超过 1.125rem。更多详情可参考本专栏第 14 篇 《【CSS in Depth 2 精译_014】2.4 视口的相对单位》 的第 2.4.2 小节相关内容。

关于《CSS in Depth》（中译本书名《深入解析 CSS》）

第 1 版第 2 版
读者评分原版：4.7（亚马逊）；中文版：9.3（豆瓣）原版：5.0（亚马逊）；中文版：暂无，待出版
出版时间原版：2018 年 3 月；中文版：2020 年 4 月原版：2024 年 7 月；中文版：暂无，待出版
原价原版：$44.99；中文版：￥139.00原版：$59.99；中文版：暂无，待出版
现价原版：$36.49；中文版：￥52.54 起步原版：$52.09；中文版：暂无，待出版
原版国内预订起步价 ￥461.00起步价 ￥750.00

本专栏为该书第 2 版高分译文专栏，全网首发，精译精校，持续更新，计划今年内完成全书翻译，敬请期待！！！

相关文章：

【CSS in Depth 2 精译_045】7.1 CSS 响应式设计中的移动端优先设计原则（上）

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一章 层叠、优先级与继承&#xff08;已完结&#xff09; 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位&#xff08;已完结&#xff09; 2.1 相对…...

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

在线教育新篇章：SpringBoot系统开发策略

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…...

编程日记 2024/10/9 15:23:21

cmdsh

#!/bin/bash #set -x bindirname "$0" bincd "$bin"; pwd echo $bin if [ $# -lt 2 ] then echo “Usage: ./runRemoteCmd.sh Command MachineTag” echo “Usage: ./runRemoteCmd.sh Command MachineTag confFile” exit fi cmd$1 tag$2 if [ a’ 3 ′…...

编程日记 2024/10/9 15:21:18

一键生成PPT的AI工具-Kimi！

一键生成PPT的AI工具-Kimi&#xff01; 前言介绍Kimi为什么选择Kimi如何使用Kimi在线编辑PPT下载生成的PPT自己编辑 结语 &#x1f600;大家好&#xff01;我是向阳&#x1f31e;&#xff0c;一个想成为优秀全栈开发工程师的有志青年&#xff01; &#x1f4d4;今天不来讨论前后…...

编程日记 2024/10/9 15:19:15

java.lang.NoClassDefFoundError: kotlin/Result解决方案

问题 在控制窗口上虽然报错是找不到对应的class&#xff0c;但是呢在我们导入kotlin的后&#xff0c;还是报相同的异常&#xff0c;在网上查找了各种资料&#xff0c;都没有解决方案。 问题分析 在idea2021之后&#xff0c;kotlin都使用远程仓库&#xff08;kotlinx-coeouti…...

编程日记 2024/10/9 15:18:14

LSTM的变体

一、GRU 1、什么是GRU 门控循环单元&#xff08;GRU&#xff09;是一种循环神经网络&#xff08;RNN&#xff09;的变体&#xff0c;它通过引入门控机制来控制信息的流动&#xff0c;从而有效地解决了传统RNN中的梯度消失问题。GRU由Cho等人在2014年提出&#xff0c;它简化了…...

编程日记 2024/10/9 15:17:12

LeetCode讲解篇之852. 山脉数组的峰顶索引

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 我们可以采用二分查找&#xff0c;每次查询区间中点元素与中点下一个元素比较 如果中点元素大于其下一个元素&#xff0c;则表示从中点开始向右是递减趋势&#xff0c;那峰值索引一定小于等于中点&#xff0c;我…...

编程日记 2024/10/9 15:16:11

矿井人员数据集，用于目标检测，深度学习，采用txt打标签，即yolo格式，也有原文件可以自己转换。总共3500张图片的数据量，划分给训练集2446张，

矿井人员数据集&#xff0c;用于目标检测&#xff0c;深度学习&#xff0c;采用txt打标签&#xff0c;即yolo格式&#xff0c;也有原文件可以自己转换。总共3500张图片的数据量&#xff0c;划分给训练集2446张&#xff1a; ### 矿井人员数据集用于目标检测的详细说明 #### 1. …...

编程日记 2024/10/9 15:15:09

消息队列RabbitMQ

文章目录 1. 简介与安装2. 基本概念3. SpringAMQP4. 交换机类型5. 消息转换器5.1 默认转换器5.2 配置JSON转换器 6 生产者的可靠性6.1 生产者超时重连机制6.2 生产者确认机制 6. MQ的可靠性6.1 数据持久化6.2 惰性队列 Lazy Queue 7. 消费者的可靠性7.1 消费者确认机制7.2 失败…...

编程日记 2024/10/9 15:12:03

RabbitMQ概述

什么是MQ MQ (message queue)消息队列 MQ从字⾯意思上看,本质是个队列,FIFO先⼊先出&#xff0c;只不过队列中存放的内容是消息(message).消息可以⾮常简单,⽐如只包含⽂本字符串,JSON等,也可以很复杂,⽐如内嵌对象 RabbitMQ是MQ的一种实现,是Rabbit 企业下的⼀个消息队列产…...

编程日记 2024/10/9 15:11:01

Golang学习路线

以下是一条学习Golang&#xff08;Go语言&#xff09;的路线&#xff1a; 一、基础入门 1. 环境搭建 安装Go编译器&#xff0c;在官网&#xff08;https://golang.org/dl/&#xff09;下载适合操作系统的安装包并配置好环境变量。 2. 语法学习学习变量、数据类型&#xff08…...

编程日记 2024/10/9 15:08:59

Flink从ck拉起任务脚本

#!/bin/bashAPP_NAME"orderTest"CHECKPOINT_BASE_PATH"hdfs:///jobs/flink/checkpoints/aaa-test/"is_running$(yarn application -list | grep -w "$APP_NAME" | grep -c "RUNNING")if [ $is_running -gt 0 ]; thenecho "应用程…...

编程日记 2024/10/9 15:07:58

GADBench Revisiting and Benchmarking Supervised Graph Anomaly Detection

Neurips 23 推荐指数&#xff1a; #paper/⭐⭐⭐ 领域&#xff1a;图异常检测 胡言乱语&#xff1a; neurips 的benchmark模块的文章总能给人一些启发性的理解&#xff0c;这篇的insight真有意思。个人感兴趣的地方会加粗。此外&#xff0c;这篇文章和腾讯AIlab合作&#xff…...

编程日记 2024/10/9 15:04:55

某象异形滑块99%准确率方案

注意，本文只提供学习的思路，严禁违反法律以及破坏信息系统等行为，本文只提供思路 如有侵犯，请联系作者下架 该文章模型已经上线ocr识别网站，欢迎测试！！，地址：https://yxlocr.windy-rain.cn/ocr/slider/6 所谓的顶象异形滑块，是指没有采用常规的缺口，使用各种形状的…...

编程日记 2024/10/9 15:03:52

CDN绕过学习

1.什么是CDN&#xff1f; CDN就是分布在各个地区的服务器&#xff0c;这些服务器储存着数据的副本。 哪些服务器比较接近你&#xff0c;当你发起请求时&#xff0c;提前就会快速为你提供服务。 总结来说就是&#xff1a; 其实就是用来加速访问的&#xff0c;以及缓解压力&a…...

编程日记 2024/10/9 15:02:51

SpringBoot日常：redission的接入使用和源码解析

文章目录 一、简介二、集成redissionpom文件redission 配置文件application.yml文件启动类 三、JAVA 操作案例字符串操作哈希操作列表操作集合操作有序集合操作布隆过滤器操作分布式锁操作 四、源码解析 一、简介 Redisson 是一个在 Redis 的基础上实现的 Java 驻内存数据网格…...

编程日记 2024/10/9 14:54:41

npm包管理深度探索：从基础到进阶全面教程！

目录 一、npm概述1、npm简介&#xff08;1&#xff09;什么是npm&#xff1f;&#xff08;2&#xff09;npm的核心功能&#xff08;3&#xff09;npm的工作原理&#xff08;4&#xff09;npm的优势&#xff08;5&#xff09;npm的局限性&#xff08;6&#xff09;总结 2、npm的…...

编程日记 2024/10/9 14:52:37

最新免费GPT4O和Midjourney

一、什么是GPT4O&#xff1f; GPT-4 是 OpenAI 研发的大型语言模型。它具有强大的语言理解和生成能力&#xff0c;在自然语言处理等诸多领域有着广泛的应用和表现。 二、什么是Midjourney&#xff1f; Midjourney 是一款人工智能图像生成工具。它可以根据用户输入的描述或提…...

编程日记 2024/10/9 14:51:36

python操作OpenAI教程

python操作OpenAI pip install -U openai代码&#xff1a; from openai import OpenAI# 解决请求超时问题 import os os.environ["http_proxy"] "http://localhost:7890" os.environ["https_proxy"] "http://localhost:7890"# 需要…...

编程日记 2024/10/9 14:50:34

如何版本REST API：综合指南

目录 总则什么是REST API版本控制？为什么API版本控制很重要？如何对REST API进行版本控制 理解API契约评估需求选择版本控制策略沟通变化保持向后兼容性详细文档记录REST API版本控制最佳实践REST API版本控制常见问题：REST API版本控制总则 版本化REST API对于确保软件应用…...

编程日记 2024/10/9 14:49:33

Docker 环境下 Nginx 监控实战：使用 Prometheus 实现 Nginx 性能监控的完整部署指南

Docker 环境下 Nginx 监控实战&#xff1a;使用 Prometheus 实现 Nginx 性能监控的完整部署指南 文章目录 Docker 环境下 Nginx 监控实战&#xff1a;使用 Prometheus 实现 Nginx 性能监控的完整部署指南一 查看模块是否安装二 配置 status 访问端点三 Docker 部署 nginx-prome…...

编程日记 2024/10/9 14:48:32

网络安全-IPv4和IPv6的区别

1. 2409:8c20:6:1135:0:ff:b027:210d。 这是一个IPv6地址。IPv6&#xff08;互联网协议版本6&#xff09;是用于标识网络中的设备的一种协议&#xff0c;它可以提供比IPv4更大的地址空间。这个地址由八组十六进制数字组成&#xff0c;每组之间用冒号分隔。IPv6地址通常用于替代…...

编程日记 2024/10/9 14:47:31

【移动端】事件基础

一、移动端事件分类 移动端事件主要分为以下几类&#xff1a; 1. 触摸事件&#xff08;Touch Events&#xff09; 触摸事件是移动设备特有的事件&#xff0c;用来处理用户通过触摸屏幕进行的操作。主要的触摸事件有&#xff1a; touchstart&#xff1a;手指触摸屏幕时触发。…...

编程日记 2024/10/9 14:45:29

软件测试比赛-学习

一、环境配置 二、浏览器适配 //1.设置浏览器的位置,google浏览器位置是默认且固定在电脑里的//2.设置浏览器驱动的位置,C:\Users\27743\AppData\Local\Google\Chrome\ApplicationSystem.setProperty("webdriver.chrome.driver", "C:\\Users\\27743\\AppData\\…...

编程日记 2024/10/9 14:44:27

力扣LeetCode-链表中的循环与递归使用

标题做题的时候发现循环与递归的使用差别&#xff1a; 看两道题&#xff1a; 两道题都是不知道链表有多长&#xff0c;所以需要用到循环&#xff0c;用到循环就可以把整个过程分成多个循环体&#xff0c;就是每一次循环要执行的内容。 反转链表&#xff1a; 把null–>1…...

编程日记 2024/10/9 14:43:24

AFSim仿真系统 --- 系统简解_08 传感器与特征

传感器与特征 传感器是平台的一部分&#xff0c;为拥有该平台提供了探测其他平台及其组成部分的能力。 特征是平台的一种属性&#xff0c;用于确定特定传感器是否能够探测到特征所拥有的平台。 以下是用于探测平台的一些特征属性列表&#xff1a; 声学红外光学雷达 AFSIM …...

编程日记 2024/10/9 14:38:17

已经安装了qt，想添加mingw组件，包含gcc等

1、已经安装了qt&#xff0c;想添加mingw组件&#xff0c; 步骤1 双击打开MaintenanceTool.exe&#xff0c; 步骤2&#xff1a; 选择清华大学开源软件镜像网站&#xff0c;选择相应QT版本添加网址https://mirrors.tuna.tsinghua.edu.cn/qt/online/qtsdkrepository/windows_x8…...

编程日记 2024/10/9 14:37:16

数据库管理-第250期 深入浅出多主多活数据库技术- Cantian存储引擎（一）（20241009）

数据库管理250期 2024-10-09 数据库管理-第250期 深入浅出多主多活数据库技术- Cantian存储引擎&#xff08;一&#xff09;&#xff08;20241009&#xff09;1 简介2 引擎构成3 引擎架构4 文件分布5 分布式MVCC6 限制/要求总结 数据库管理-第250期 深入浅出多主多活数据库技术…...

编程日记 2024/10/9 14:35:14

信号用wire类型还是reg类型定义

wire类型就是一根线&#xff0c;线有两端&#xff0c;一端发生改变&#xff0c;经过线传递的信号当然也会发生改变&#xff0c;reg类型则不同&#xff0c;可以把reg类型理解为存储数据的寄存器&#xff0c;当满足一定条件时&#xff0c;数值才被激活发生改变。 那么&#xff0…...

编程日记 2024/10/9 14:32:11

与鸿蒙同行，Java Solon v3.0 正式发布（向下兼容）

与 HarmonyOS NEXT 10月8日公测同行。Solon &#xff08;开放原子开源基金会&#xff0c;孵化项目&#xff09; v3.0 正式发布&#xff0c; 且将在 2025 年启动华为编程语言 “仓颉” 版开发&#xff08;届时会有 Solon-Java 和 Solon-CJ 两大版本&#xff09;。本次大版本更新…...

编程日记 2024/10/9 14:30:08