驾驶自动化等级与划分要素的关系
| 分级 | 名称 | 车辆横向和纵向运动控制 | 目标和事件探测与响应 | 动态驾驶任务接管 | 设计运行条件 |
| 0 级 | 应急辅助 | 驾驶员 | 驾驶员及系统 | 驾驶员 | 有限制 |
| 1 级 | 部分驾驶辅助 | 驾驶员和系统 | 驾驶员及系统 | 驾驶员 | 有限制 |
| 2 级 | 组合驾驶辅助 | 系统 | 驾驶员及系统 | 驾驶员 | 有限制 |
| 3 级 | 有条件自动驾驶 | 系统 | 系统 | 动态驾驶任务接管用户（接管后成为驾驶员） | 有限制 |
| 4 级 | 高度自动驾驶 | 系统 | 系统 | 系统 | 有限制 |
| 5 级 | 完全自动驾驶 | 系统 | 系统 | 系统 | 无限制* |
| * 排除商业和法规因素等限制。 | |||||
摘自：《汽车驾驶自动化分级》（GB/T 40429-2021）
部分车企驾驶安全与辅助、智能领航和泊车辅助系统简介
问界
新M5 全系搭载华为高阶智能驾驶系统，包含智驾领航辅助（NCA）、车道巡航辅助（LCC）、车道巡航辅助增强（LCC Plus）、全向防碰撞系统（CAS）、智能泊车辅助（APA）、遥控泊车辅助（RPA）、代客泊车辅助（AVP）、哨兵模式等功能。部分高阶智驾功能需付费开通，如城区智驾领航辅助（City NCA）、城区车道巡航辅助增强（City LCC Plus）、代客泊车辅助（AVP）等。
阿维塔
驾驶安全与辅助：
前向碰撞预警（FCW）、自动紧急制动（AEB）、异形障碍物自动紧急制动（GAEB）、低速自动紧急制动（LAEB）、前向横穿碰撞预警（FCTA）、前向横穿碰撞制动（FCTB）、后向碰撞预警（RCW）、后向横穿碰撞预警（RCTA）、后向横穿碰撞制动（RCTB）、后向自动紧急制动（RAEB）、交通标志识别（TSR）、交通信号灯识别（TLR）、超速告警（TSA）、开门预警（DOW）、车道偏离预警（LDW）、盲区监测预警（BSD）、车道保持辅助（LKA）、紧急车道保持辅助（ELKA）、侧向障碍物防碰撞（LOCP）、自适应巡航辅助（ACC）、高速车道巡航辅助 (Highway LCC）
智能领航系统：
高速智驾领航辅助 (Highway NCA）、城区车道巡航辅助 (City LCC）、城区智驾领航辅助 (City NCA）
智能泊车辅助系统：
智能泊车辅助（APA）、遥控泊车辅助（RPA）、代客泊车辅助（AVP）
其中，ADS高阶功能包需付费购买，包含城区智驾领航辅助 (City NCA）与代客泊车辅助（AVP）。
参考：阿维塔 12 参数配置表
蔚来
智能驾驶-安全辅助：
前向碰撞预警 (FCW)、自动紧急制动 (AEB)、车辆盲区监测 (BSD)、变道盲区预警 (LCA)、侧方开门预警 (DOW)、后方穿行预警带制动 (RCTA-B)、前方穿行预警带制动 (FCTA-B)、车道偏离预警 (LDW)、车道保持辅助 (LKA)、紧急主动停车(EAS)、紧急车道保持 (ELK)、全场景误加速抑制辅助 (MAI+)、增强型驾驶员感知系统 (ADMS)、通用障碍物预警及辅助 (GOA)、增强型自动紧急转向 (AES)
智能驾驶-泊车辅助：
视觉融合泊车辅助 (S-APA with Fusion)、换电站泊车辅助 (PSAP)、车辆近距召唤 (NBS)、遥控泊车辅助 (RPA)
智能驾驶-辅助驾驶：
车道居中辅助 (LCC)、转向灯控制变道 (ALC)、智能自适应巡航 (i-ACC)、道路标识识别 (TSR)、动态环境模拟显示 (ESD)、视觉融合起步提醒 (AGN)
蔚来智能驾驶NAD服务：
智能驾驶NAD服务（覆盖部分城区道路、封闭高速道路的智能驾驶体验）、低速及泊车智能驾驶NAD服务（支持领航泊车、智能召唤等功能体验）、全域领航辅助 (NOP+)（支持高速、城市快速路、城区道路、高速服务区领航换电等体验）
特斯拉
基本版 Autopilot 自动辅助驾驶：
主动巡航控制、自动辅助转向
增强版 Autopilot 自动辅助驾驶：
自动变道、自动辅助导航驾驶、自动泊车、召唤功能、智能召唤功能
完全自动驾驶功能：
交通信号灯和停车标志控制、在城市街道自动辅助转向
参考：Model 3 车主手册 Autopilot 自动辅助驾驶
小米
Xiaomi Pilot Pro：高速领航辅助（NOA）、智能泊车辅助（APA）、车道居中辅助（LCC）、代客泊车辅助（AVP）
Xiaomi Pilot Max：城市领航辅助（NOA）
如果手机开启了自动横屏，那么网页就会跟着旋转，导致网页宽度变大，高度变小，页面布局不友好，我们可以通过判断屏幕方向 api，用 css 设置旋转。
HTML：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>保持竖屏示例</title>
</head>
<body>
<div id="app">
<div class="page">
<div>把手机横过来试试</div>
<div>页面永远保持竖屏方向</div>
</div>
</div>
</body>
</html>CSS：
body { margin: 0; }
.page { text-align: center; padding-top: 100px; }
@media screen and (orientation: landscape) {
body { width: 100vh; height: 100vw; overflow: hidden; }
.page.landscape-primary { transform: rotate(-90deg); transform-origin: top left; width: 100vh; height: 100vw; position: absolute; top: 100%; left: 0; }
.page.landscape-secondary { transform: rotate(90deg); transform-origin: top left; width: 100vh; height: 100vw; position: absolute; top: 0; left: 100%; }
}JS:
function fn_set_orientation() {
var orientation = window.screen.orientation || window.screen.mozOrientation || window.screen.msOrientation;
const div = document.querySelector('.page');
console.log(orientation.type)
switch (orientation.type) {
case 'landscape-primary': {
div.classList.remove('landscape-secondary');
div.classList.add('landscape-primary');
break;
}
case 'landscape-secondary': {
div.classList.remove('landscape-primary');
div.classList.add('landscape-secondary');
break;
}
default: {
div.classList.remove('landscape-primary');
div.classList.remove('landscape-secondary');
break;
}
}
}
window.addEventListener("orientationchange", function () {
fn_set_orientation();
});
fn_set_orientation();示例：
https://xoyozo.net/Demo/Orientation
一般用法：/宽度/高度
例：https://picsum.photos/400/300
方形图像：/边长
指定图像：/id/{image}
例：https://picsum.photos/id/237/400/300
基于种子获取相同的随机图像：/seed/{seed}
例：https://picsum.photos/seed/xoyozo/400/300
灰度：?grayscale
例：https://picsum.photos/400/300?grayscale
模糊：?blur
例：https://picsum.photos/400/300/?blur
指定模糊级别：?blur=[1,10]
例：https://picsum.photos/400/300/?blur=2
组合
例：https://picsum.photos/id/870/400/300?grayscale&blur=2
防止缓存
例：
<img src="https://picsum.photos/400/300?random=1">
<img src="https://picsum.photos/400/300?random=2">
指定图像格式：
原生判断
window.addEventListener('scroll', scroll)
function scroll() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
if (scrollTop === 0) {
console.log('滚动到顶了');
}
if (scrollTop + clientHeight >= scrollHeight - 100) {
console.log('滚动到底了');
}
}
window.removeEventListener('scroll', scroll) // 移除滚动事件scrollTop：文档在可视区上沿的位置距离文档顶部的距离
clientHeight：可视区的高度
scrollHeight：文档总高度
100：用于在滚动到底部之前提前加载内容（如瀑布流），提高用户体验，请自行修改数值（建议不小于 2 像素，以规避在部分浏览器上因获得值为小数时可能无法触发的问题）
jQuery 判断
window.addEventListener('scroll', scroll)
function scroll() {
const doc_height = $(document).height();
const scroll_top = $(document).scrollTop();
const window_height = $(window).height();
if (scroll_top === 0) {
console.log('滚动到顶了');
} else if (scroll_top + window_height >= doc_height - 100) {
console.log('滚动到底了');
}
}不要使用 CSS 方式设置 canvas 的宽高，应使用属性来设置其尺寸。
直接设置属性：
<canvas id="canvas" width="400" height="300"></canvas>因属性值是以 px 为单位的，如果项目全程使用 rem 等其它尺寸单位，可通过 JS 来设置
var canvas = document.getElementById('canvas');
coatingW = $('#coating_frame').width();
coatingH = $('#coating_frame').height();
canvas.width = coatingW;
canvas.height = coatingH;按材料
| 铅酸电池 | 成本低、低温性好、性价比高；能量密度低、寿命短、体积大、安全性差。 |
| 镍氢电池 | 成本低、技术成熟、寿命长、耐用；能量密度低、体积大、电压低、有电池记忆效应。含有重金属，遗弃后对环境造成污染。 |
| 锰酸锂电池 | 成本低、安全性和低温性能好的正极材料，但是其材料本身并不太稳定，容易分解产生气体，因此多用于和其它材料混合使用，以降低电芯成本，但其循环寿命衰减较快，容易发生鼓胀，高温性能较差、寿命相对短。 |
| 磷酸铁锂电池 | 是一种使用磷酸铁锂（LiFePO4）作为正极材料，碳作为负极材料的锂离子电池。具有工作电压高、能量密度大、循环寿命长、安全性能好、自放电率小、无记忆效应的优点。电池温度处于500-600℃时，其内部化学成分才开始分解，并且穿刺、短路、高温都不会燃烧或者爆炸，使用寿命也较长。但车辆续航里程一般，当温度低于-5℃时，充电效率低，不适合北方在冬天充电的需求。 |
| 三元锂电池 | 是指正极材料使用镍钴锰酸锂（Li(NiCoMn)O2）或者镍钴铝酸锂的三元正极材料的锂电池。能量密度高、循环寿命长、不惧低温；高温下稳定不足。能量密度可达最高，但高温性相对较差，关于续航里程有要求的纯电动汽车，其是主流方向，且适合北方天气，低温时电池更加稳定。 |
按制造和封装形式
| 1865电池 | 18650是锂离子电池的鼻祖。日本SONY公司当年为了节省成本而定下的一种标准性的锂离子电池型号，其中18表示直径为18mm，65表示长度为65mm，0表示为圆柱形电池。优点：容量大、寿命长、安全性能高、电压高、没有记忆效应、内阻小、可串联或并联组合成18650锂电池组、使用范围广。 |
| 2170电池 | 2017年1月4日，特斯拉官方宣布新一代锂电池“2170”开始量产。直径为21mm、高度70mm。 |
| 4680电池 | 2020年9月特斯拉发布了的新型电池类型，据介绍，相较2170电池，该电池能量方面提高5倍，续航里程提高16%，动力方面提高6倍。2022年初开始量产。 |
| 刀片电池 | 是比亚迪于2020年3月29日发布的电池产品。该电池采用磷酸铁锂技术。“刀片电池”通过结构创新，在成组时可以跳过“模组”，大幅提高了体积利用率，最终达成在同样的空间内装入更多电芯的设计目标。相较传统电池包，“刀片电池”的体积利用率提升了50%以上，也就是说续航里程可提升50%以上，达到了高能量密度三元锂电池的同等水平。 |
| 麒麟电池 | 2022年3月26日，宁德时代首席科学家吴凯在2022年电动汽车百人会论坛上表示：宁德时代通过不断技术迭代，推出了第三代CTP技术，其系统重量、能量密度及体积能量密度继续引领行业最高水平。在相同的化学体系、同等电池包尺寸下，麒麟电池包的电量，相比4680系统可以提升13%。第三代CTP技术，兼顾极速、无损、安全、高效等优势，适用磷酸铁锂、三元电池，涵盖乘用车、商用车领域。 |
核心文件路径：/theme/html/demo*/src/js/components/core.datatable.js
所有参数的默认值见该文件 3369 行起。
data：
| 属性 | 功能 | 值 |
| type | 数据源类型 | local / remote |
| source | 数据源 | 链接或对象（见下方） |
| pageSize | 每页项数 | 默认 10 |
| saveState | 刷新、重新打开、返回时仍保持状态 | 默认 true |
| serverPaging | 是否在服务端实现分页 | 默认 false |
| serverFiltering | 是否在服务端实现筛选 | 默认 false |
| serverSorting | 是否在服务端实现排序 | 默认 false |
| autoColumns | 为远程数据源启用自动列功能 | 默认 false |
| attr |
data.source：
| 属性 | 功能 | 值 |
| url | 数据源地址 | |
| params | 请求参数 |
|
| headers |
自定义请求的头 |
|
| map | 数据地图，作用是对返回的数据进行整理和定位 |
|
layout：
| 属性 | 功能 | 值 |
| theme | 主题 | 默认 default |
| class | 包裹的 CSS 样式 | |
| scroll | 在需要时显示横向或纵向滚动条 | 默认 false |
| height | 表格高度 | 默认 null |
| minHeight | 表格最小高度 | 默认 null |
| footer | 是否显示表格底部 | 默认 false |
| header | 是否显示表头 | 默认 true |
| customScrollbar | 自定义的滚动条 | 默认 true |
| spinner |
Loading 样式 |
|
| icons | 表格中的 icon |
|
| sortable | 是否支持按列排序 | 默认 true |
|
resizable |
是否支持鼠标拖动改变列宽 | 默认 false |
| filterable | 在列中过滤 | 默认 false |
|
pagination |
显示分页信息 | 默认 true |
|
editable |
行内编辑 | 默认 false |
|
columns |
列 | 见本文下方 |
|
search |
搜索 |
|
layout.columns：
| 属性 | 功能 | 解释 |
| field | 字段名 | 对应 JSON 的属性名，点击表头时作为排序字段名 |
| title | 表头名 | 显示在表格头部 |
| sortable | 默认排序方式 | 可选：'asc' / 'desc' |
| width | 单元格最小宽度 | 值与 CSS 值一致，填数字时默认单位 px |
| type | 数据类型 | 'number' / 'date' 等，与本地排序有关 |
| format | 数据格式化 | 例格式化日期：'YYYY-MM-DD' |
| selector | 是否显示选择框 | 布尔值或对象，如：{ class: '' } |
| textAlign | 文字对齐方式 | 'center' |
| overflow | 内容超过单元格宽度时是否显示 | 'visible'：永远显示 |
| autoHide | 自适应显示/隐藏 | 布尔值 |
| template | 用于显示内容的 HTML 模板 | function(row) { return row.Id; } |
| sortCallback | 排序回调 | 自定义排序方式，参 local-sort.js |
其它：
| 属性 | 功能 | 解释 |
| translate | 翻译 |
参 core.datatable.js 3512 行，简体中文示例：
|
| extensions |
暂时没有找到对字符串内容进行自动 HTML 编码的属性，这可能带来 XSS 攻击风险，在 remote 方式中必须在服务端预先 HtmlEncode。即使在 layout.columns.template 中进行处理也是无济于事，恶意代码会在 ajax 加载完成后立即执行。
方法和事件：待完善。
更多信息请查询官方文档：https://keenthemes.com/keen/?page=docs§ion=html-components-datatable
nuget 安装组件：MetadataExtractor
从文件流读取文件信息：
public IActionResult UploadFile([FromForm(Name = "[]")]IFormFile file)
{
var md = ImageMetadataReader.ReadMetadata(file.OpenReadStream());
var dic = new Dictionary<string, string>();
foreach (var m in md)
{
foreach (var t in m.Tags)
{
dic.Add(m.Name + " - " + t.Name, t.Description);
}
}
return Ok(dic);
}结果演示：
从结果中可以看到计算的尺寸、拍摄设备、拍摄时间等信息。
MetadataExtractor 是一个简单而轻便的库，用于从图像和视频文件中读取元数据。
MetadataExtractor 从 JPEG、TIFF、WebP、PSD、PNG、BMP、GIF、ICO、PCX 和相机 RAW 文件读取 Exif、IPTC、XMP、ICC、Photoshop、WebP、PNG、BMP、GIF、ICO、PCX 元数据。
此外，还支持 MOV 和相关的 QuickTime 视频格式，例如 MP4、M4V、3G2、3GP。
相机制造商特定的支持包括爱克发，佳能，卡西欧，DJI，爱普生，富士胶片，柯达，京瓷，徕卡，美能达，尼康，奥林巴斯，松下，宾得，Recononyx，三洋，Sigma / Foveon 和索尼型号。
使用 JS 根据屏幕宽度来计算页面尺寸和字体大小并不是一个好办法。
rem 单位是跟随网页根元素的 font-size 改变而自动改变的，是一个相对的长度单位，非常适合在不同手机界面上自适应屏幕大小。
一般的手机浏览器的默认字体大小为 16px。即：
:root { font-size: 16px; } /* 在 HTML 网页中，:root 选择器相当于 html */也就是说，如果我定义一个宽度为 1rem，那么它的实际宽度为 16px。反过来说，如果设计稿宽度为 1000px，那么相当于 1000÷16=62.5rem。因此，我们设置一个 62.5rem 的宽度，即可正常显示 1000px 的设计效果。
为了适应不同屏幕尺寸的手机，只需按比例换算更改 :root 的 font-size 即可。这个比例是由“窗口宽度 ÷ 设计稿宽度”得到的，姑且称它为“窗设比”。
以 iPhone X 逻辑宽度 375px 为例，设计稿宽度 1000px 时，窗设比为：0.375。:root 的 font-size 将会被重置为 16 * 0.375 = 6px。上面的 62.5rem 宽度将对应 iPhone X 宽度为 62.5 * 6 = 375px，正好是屏幕逻辑宽度。
根据这个思路，理论上，我们只需要使用 CSS 将 :root 的 font-size 设置为 1px，然后使用 JS 重置为与“窗设比”相乘的积（本例中将被重置为 0.375px）。这样，我们可以不通过换算，只需要更改单位，将设计稿中的 500px 直接写入到 CSS 为 500rem，即可实现在 iPhone X 上显示逻辑宽度为（500 * 0.375 =）187.5px，即设计稿中的 1/2 宽度对应到屏幕上 1/2 的宽度。
实际上，部分安卓手机（如华为某旗舰机）不支持 :root 的 font-size 小于 12px，其它一些浏览器也会出现小于 12px 的文字以 12px 显示。
为了避免在任何环节出现小于 12px 的 font-size 值，且不增加设计稿尺寸到 CSS 数值的换算难度，我们设计了以下思路：
约定“设样比（设计稿的 px 值与 CSS 的 rem 值的比）”为 100；
使用 JS 将 :root 的 font-size 重置为“设样比”与“窗设比（窗口宽度 ÷ 设计稿宽度）”的乘积；
计算 CSS 时的 rem 值只需从设计稿中获取 px 值再除以“设样比”100 即可。
这样做的另一个好处是，不用要求设计师必须按多少尺寸来设计，当然按主流尺寸来建议是可行的。
完整代码（jQuery 版）：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>Index</title>
<style>
body { margin: 0; text-align: center; }
#app { margin: 0 auto; background-color: #EEE; display: none; }
/* 长度计算方法：从设计稿获得长度（例如 160px），除以 px2rem 值（本例为 100），得到 1.6rem */
.whole { background-color: #D84C40; width: 10rem; }
.half { background-color: #3296FA; width: 5rem; }
.half2 { background-color: #3296FA; width: 5rem; margin-left: 5rem; }
</style>
</head>
<body>
<div id="app">
<div class="whole">100%</div>
<div class="half">50%</div>
<div class="half2">50%</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// [函数] 重置尺寸
function fn_resize() {
// 设计稿宽度（px）
var designsWidth = 1000;
// 约定的“设计稿 px 值与 CSS rem 值的比”，为方便计算，一般无需改动
var px2rem = 100;
// 限制 #app 的最大宽度为设计稿宽度
$('#app').css('max-width', designsWidth).css('min-height', $(window).height());
// 重置 :root 的 font-size
var appWidth = Math.min($(window).width(), designsWidth);
$(':root').css('font-size', px2rem * appWidth / designsWidth);
$('#app').show();
}
// 页面加载完成后重置尺寸
$(fn_resize);
// 改变窗口大小时重置尺寸
$(window).resize(fn_resize);
</script>
</body>
</html>完整代码（Vue2 版）：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>Index</title>
<style>
body { margin: 0; text-align: center; }
#app { margin: 0 auto; background-color: #EEE; }
/* 长度计算方法：从设计稿获得长度（例如 160px），除以 px2rem 值（本例为 100），得到 1.6rem */
.whole { background-color: #D84C40; width: 10rem; }
.half { background-color: #3296FA; width: 5rem; }
.half2 { background-color: #3296FA; width: 5rem; margin-left: 5rem; }
</style>
</head>
<body>
<div id="app" v-bind:style="{ maxWidth: designsWidth + 'px', minHeight: appMinHeight + 'px' }" style="display: none;" v-show="appShow">
<div class="whole">100%</div>
<div class="half">50%</div>
<div class="half2">50%</div>
<div>appWidth: {{ appWidth }}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
var app = new Vue({
el: '#app',
data: {
// 设计稿宽度（px）
designsWidth: 1000,
// 约定的“设计稿 px 值与 CSS rem 值的比”，为方便计算，一般无需改动
px2rem: 100,
// #app 的 width
appWidth: 0, // 勿改
appMinHeight: 0, // 勿改
appShow: false, // 勿改
},
mounted: function () {
// 页面加载完成后重置尺寸
this.fn_resize();
const that = this;
// 改变窗口大小时重置尺寸
window.onresize = () => {
return (() => {
console.log('RUN window.onresize()');
that.fn_resize();
})();
};
},
watch: {
// 侦听 appWidth 更改 root 的 font-size
appWidth: function () {
console.log('RUN watch: appWidth');
var root = document.getElementsByTagName("html")[0];
root.style.fontSize = (this.px2rem * this.appWidth / this.designsWidth) + 'px';
this.appShow = true;
}
},
methods: {
fn_resize: function () {
console.log('RUN methods: fn_resize()');
this.appWidth = Math.min(document.body.clientWidth, this.designsWidth);
this.appMinHeight = document.documentElement.clientHeight;
}
}
});
</script>
</body>
</html>完整代码（Vue3 版）：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>Index</title>
<style>
body { margin: 0; text-align: center; }
#app > div { display: none; margin: 0 auto; background-color: #EEE; }
/* 长度计算方法：从设计稿获得长度（例如 160px），除以 px2rem 值（本例为 100），得到 1.6rem */
.whole { background-color: #D84C40; width: 10rem; }
.half { background-color: #3296FA; width: 5rem; }
.half2 { background-color: #3296FA; width: 5rem; margin-left: 5rem; }
</style>
</head>
<body>
<div id="app">
<div style="display: none;" v-bind:style="{ maxWidth: designsWidth + 'px', minHeight: appMinHeight + 'px', display: appShow ? 'block' : 'none' }">
<div class="whole">100%</div>
<div class="half">50%</div>
<div class="half2">50%</div>
<div>appWidth: {{ appWidth }}</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<script>
const app = Vue.createApp({
data: function () {
return {
// 设计稿宽度（px）
designsWidth: 1000,
// 约定的“设计稿 px 值与 CSS rem 值的比”，为方便计算，一般无需改动
px2rem: 100,
// #app 的 width
appWidth: 0, // 勿改
appMinHeight: 0, // 勿改
appShow: false, // 勿改
}
},
mounted: function () {
// 页面加载完成后重置尺寸
this.fn_resize();
const that = this;
// 改变窗口大小时重置尺寸
window.onresize = () => {
return (() => {
console.log('RUN window.onresize()');
that.fn_resize();
})();
};
},
watch: {
// 侦听 appWidth 更改 root 的 font-size
appWidth: function () {
console.log('RUN watch: appWidth');
var root = document.getElementsByTagName("html")[0];
root.style.fontSize = (this.px2rem * this.appWidth / this.designsWidth) + 'px';
this.appShow = true;
}
},
methods: {
fn_resize: function () {
console.log('RUN methods: fn_resize()');
this.appWidth = Math.min(document.body.clientWidth, this.designsWidth);
this.appMinHeight = document.documentElement.clientHeight;
}
}
});
const vm = app.mount('#app');
</script>
</body>
</html>示例中 CSS 初始 :root 的 font-size 为 16px（一个较小值，防止页面加载时瞬间出现大号文字影响用户体验），经过 fn_resize 后，:root 的 font-size 被设置为（100 * 375 / 1000 =）37.5px（iPhone X 中），那么宽度为 1000px 的设计稿中的 500px 换算到 CSS 中为 5rem，也即 37.5 * 5 = 187.5px，就是 iPhone X 的屏幕宽度的一半。
示例中 id 为 app 的 div 是用来在 PC 浏览器中限制页面内容最大宽度的（类似微信公众号发布的文章），如果网页不需要在 PC 端显示，jQuery 版代码中的 $('#app').width() 可以用 $(window).width() 来代替。
这个 div#app 一般设计有背景色，用于在宽度超过设计稿的设备上显示时区别于 body 的背景。但是当网页内容不超过一屏时，div#app 高度小于窗口，示例中与 appMinHeight 相关的代码就是为了解决这个问题。
示例中 div#app 隐藏/显示相关代码用于解决在页面加载初期由于 font-size 值变化引起的一闪而过的排版错乱。
最后补充一点，如果改变窗口大小时涉及执行耗时的操作，为避免页面卡顿，可以参考这篇文章添加函数防抖：https://xoyozo.net/Blog/Details/js-function-anti-shake
在图表页上显示测量值
如果您有 Visio 标准版，可以通过使用字段，链接到形状的高度和宽度属性来显示形状的尺寸。有关使用域的详细信息，请参阅使用字段来保持当前显示的信息。
如果您有 Visio 专业版，您可以使用尺寸形状以显示大小。尺寸形状显示他们正在粘附到，并且原始形状调整文字时自动更新该形状的大小。
尺寸形状包含在一些模板内，并可以在任何模板打开尺寸度量模具。
若要打开尺寸度量模具
在“形状”窗口中，单击“更多形状”。
指向其他 Visio 方案，，然后单击尺寸度量-建筑或尺寸度量-工程。
将尺寸形状拖动到要测量的形状，然后将尺寸线形状的端点粘附到要测量的点。
注意: 若要更改度量单位，右键单击尺寸形状，然后单击快捷菜单上的精度和单位。
如果您有 Visio 专业版，请按下列步骤将指导您如何使用尺寸形状的示例。 使用尺寸形状 （示例） 单击文件选项卡，单击新建，单击类别，单击地图和平面布置图，然后双击家居规划。 单击庭园附属设施模具的标题栏和混凝土通道形状拖到绘图页。 您可能需要滚动以找到该模具或其他人的模具下的列表。 拖动手柄以扩大此混凝土通道形状上。 单击尺寸度量-建筑模具的标题栏并将水平形状拖到绘图页上通道形状上方。 如果看不到此列表中的模具，请按照上述过程，以打开尺寸度量模具中的说明进行操作。 请将形状手柄右侧的水平尺寸形状拖到通道形状的右边缘，直至绿色框中显示指示形状粘附在一起。 将水平形状左侧的形状手柄拖到通道形状的左边缘。 拖动黄色菱形 ( 示例
)，拖移到通道上方的位置右侧以便尺寸线不会遮住通道形状。