驾驶自动化等级与划分要素的关系
分级 | 名称 | 车辆横向和纵向运动控制 | 目标和事件探测与响应 | 动态驾驶任务接管 | 设计运行条件 |
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+)(支持高速、城市快速路、城区道路、高速服务区领航换电等体验)
小米
Xiaomi Pilot Pro:高速领航辅助(NOA)、智能泊车辅助(APA)、车道居中辅助(LCC)、代客泊车辅助(AVP)
Xiaomi Pilot Max:城市领航辅助(NOA)
特斯拉
基本版 Autopilot 自动辅助驾驶:
主动巡航控制、自动辅助转向
增强版 Autopilot 自动辅助驾驶:
自动变道、自动辅助导航驾驶、自动泊车、召唤功能、智能召唤功能
完全自动驾驶功能 FSDFull-Self Driving(简称“FSD”):
交通信号灯和停车标志控制、在城市街道自动辅助转向等。2024年3月31日,特斯拉向美国部分用户推送FSD V12(Supervised)版本。
解析域名(非网站域名)、挂载磁盘(若有另购)、修改实例名称、主机名
设置阿里云(重要)
远程连接进入 ECS(若解析未生效可以先用 IP)(若新服默认使用 3389 端口,可先在安全组临时放行 3389 端口)
开启 Windows 防火墙(使用推荐设置)
Windows 更新、并在高级选项中开启(更新 Windows 时接收其它 Microsoft 产品的更新)
安装 IIS:服务器管理器-添加角色和功能-勾选“Web 服务器(IIS)”包括管理工具
建议勾选:
默认已勾选项
按需安装 IP 和域限制
跟踪(即“失败请求跟踪”)
请求监视器、日志记录工具、
按需安装 ASP
按需安装 ASP.NET 4.8(会同时勾选 .NET Extensibility 4.8、ISAPI 扩展、ISAPI 筛选器)
按需安装 WebSocket 协议
应用程序初始化(建议安装)
管理服务(用于 Web 部署)
细节:设置任务栏;设置桌面图标;个性化-颜色-勾选“标题栏和窗口边框”;设置输入法;
下载 URL 重写(文件名:rewrite_amd64_zh-CN.msi)
下载 MySQL Connector/NET(文件名:mysql-connector-net-8.0.19.msi)
下载 ASP.NET Core 运行时 Hosting Bundle(文件名:dotnet-hosting-*.*.*-win.exe)
下载 .NET 桌面运行时 Windows x64(文件名:windowsdesktop-runtime-*.*.*-win-x64.exe)
下载 Web Deploy(文件名:WebDeploy_amd64_zh-CN.msi)
服务:设置“ASP.NET State Service”自动启动
IIS 日志:路径(如 D:\wwwlogs),每小时(统一设置一个全局的就行了,不需要设置每个网站),按需勾选“使用本地时间进行文件命名和滚动更新”
IIS 导入证书:个人、允许导出证书。参
设置权限:设置网站所在分区(如 D 盘),安全,添加 IIS_IUSRS,全部拒绝(防止跨站)
添加用户:为每个网站创建用户(既能防止跨站,又能跟踪进程),密码不能改、不过期,仅隶属于 IIS_IUSRS,并添加到每个网站的根目录,若用户创建失败看这里。
创建网站:设置访问物理路径的用户;设置应用程序池的“标识”用户;编辑绑定:勾选需要服务器名称指示;检查域名是否绑全;设置写入目录;
重复上面两步
检查所有网站用户是否仅隶属于 IIS_IUSRS(在“组”页面双击 Users 和 IIS_IUSRS 查看成员)
在应用程序池列表页面检查 CLR 版本、管托管道模式和标识;在网站列表页面检查绑定和路径
设置“IP 地址和域限制”
废弃旧服时再次检查:IIS 中各功能设置、hosts、安装的应用程序、启动项、服务、防火墙等
解析各网站域名
其它:资源管理器-查看-选项-查看-去掉“始终显示图标,从不显示缩略图”前的勾
再次检查阿里云设置
在备份工具中添加该服务器的所有备份项
>> 关于域名解析
因各地域名解析生效时间不可控,一般国内域名 1 天内,国际域名 2 天内。
若网站数据库在 RDS、上传文件在 OSS,则解析 48 小时后直接停止原网站即可;(比较理想的)
文件上传到 ECS 的可使用 FTP 等工具定时同步文件,或直接停止原网站。(网友会遇到新文章中图片无法显示等问题)
还有一种方法是新网站提前解析一个备用域名,确保完全生效后再修改正式域名的解析,原网站无条件跳转到备用域名,如果数据库中有保存完整网址路径的,关闭原网站并解绑备用域名之后,进行批量替换。(缺点是可能会影响在搜索引擎的网站权重)
部分有定时器的网站要注意,如果两个网站的定时器都正常开启会导致意外的,需要停止其中一个网站的定时器。
当然每种方法都有优缺点,选择可以接受且方便的一种即可。
更多文章:
语言集成查询(LINQ)为 C# 和 VB 提供语言级查询功能和高阶函数 API,让你能够编写具有很高表达力度的声明性代码。
LINQ 有两种写法:查询语法和方法语法,查询语法又称查询表达式语法。
查询语法:
from 变量名 in 集合 where 条件 select 结果变量
方法语法:
集合.Where(变量名 => 条件)
LINQ 的标准查询运算符及语法示例
类型 | 操作符 | 功能 | 方法语法 | 查询语法 |
投影操作符 | Select | 用于从集合中选择指定的属性或转换元素 |
|
|
SelectMany | 用于在嵌套集合中选择并平铺元素 |
|
| |
限制操作符 | Where | 根据指定的条件筛选集合中的元素 |
|
|
排序操作符 | OrderBy、OrderByDescending、ThenBy、ThenByDescending | 用于对集合中的元素进行排序 |
|
|
Reverse | 将集合中的元素顺序反转 |
| ||
联接操作符 | Join GroupJoin | 用于在两个集合之间执行内连接(Join)操作,或者对一个集合进行分组连接(GroupJoin)操作 | 内联接
左连接
| 内联接
左连接
|
分组操作符 | GroupBy | 根据指定的键对集合中的元素进行分组 | ||
串联操作符 | Concat | 将两个集合连接成一个新集合 | ||
聚合操作符 | Aggregate、Average、Count、LongCount、Max、Min、Sum | Aggregate 可以用于在集合上执行自定义的累积函数,其他方法用于计算集合中的元素的平均值、总数、最大值、最小值和总和 | ||
集合操作符 | Distinct、Union、Intersect、Except | 用于执行集合间的不同操作,Distinct 移除重复元素,Union 计算两个集合的并集,Intersect 计算两个集合的交集,Except 计算一个集合相对于另一个集合的差集 | ||
生成操作符 | Empty、Range、Repeat | Empty 创建一个空集合,Range 创建一个包含一系列连续数字的集合,Repeat 创建一个重复多次相同元素的集合 | ||
转换操作符 | AsEnumerable、Cast、OfType、ToArray、ToDictionary、ToList、ToLookup | 这些方法用于将集合转换为不同类型的集合或字典 | ||
元素操作符 | DefaultIfEmpty、ElementAt、ElementAtOrDefault、First、Last、FirstOrDefault、LastOrDefault、Single、SingleOrDefault | 这些方法用于获取集合中的元素,处理可能的空集合或超出索引的情况 | ||
相等操作符 | SequenceEqual | 用于比较两个集合是否包含相同的元素,顺序也需要相同 | ||
量词操作符 | All、Any、Contains | 用于检查集合中的元素是否满足特定条件,All 检查是否所有元素都满足条件,Any 检查是否有任何元素满足条件,Contains 检查集合是否包含特定元素 | ||
分割操作符 | Skip、SkipWhile、Take、TakeWhile | 用于从集合中跳过一些元素或只取一部分元素,可以结合特定条件进行操作 |
了解立即执行与延迟执行可以大大改善性能。
Midjourney | Stable Diffusion | |
收费情况 | 收费 | 开源免费 |
使用方式 | 联网 | 本地部署(保护隐私?) |
学习入门 | 入门简单(学习) | 学习成本较高(学习) |
内容质量 | 出图丰富多彩,质量高 | |
内容限制 | 内容有限制 | 内容无限制 |
可扩展性 | 可以安装插件(ControlNet 等) | |
电脑配置 | 电脑配置有要求(N卡) |
从朋友圈发布的视频时长限制30秒
从视频号发布的视频时长限制30分钟
视频号助手网址:https://channels.weixin.qq.com/platform,管理视频号创作内容,相当于抖音巨量百应达人工作台。
视频号小店网址:https://channels.weixin.qq.com/shop,管理商品和订单,相当于抖店。
制式参数 | 毫来波雷达 | 超声波雷达 | 激光雷达 | 红外传感器 | 光学成像 |
最大作用距离(m) | 1000 | 15 | 300 | 35 | 无法探知相关的距离、速度和角度信息 |
速度范围(km/h) | ≥1000 | ≤100 | ≥300 | ≤10 | |
径向运动 | 好 | 好 | 好 | 差 | |
切向运动 | 差 | 差 | 差 | 好 | |
静止测距 | 复杂 | 简单 | 简单 | 不能 | |
角度测量能力 | 较好 | 好 | 很好 | 不能 | |
环境限制因素 | 全天候、不易受环境影响 | 风、沙尘等 | 雨天 | 温度 | 光线 |
成本 | 中 | 低 | 高 | 低中 | |
穿透性 | 好 | 较长 | 较差 | 差 | |
优点 | 不受天气情况和夜间的影响。探测距离远 | 价格低、数据处理简单,体积小巧 | 测距精度高,方向性强,响应时间快,不受地面杂波干扰 | 成本低、夜间不受影响 | 成本适中,可实现道路目标的分辨与识别 |
缺点 | 成本较高。目标识别难度较大。可与摄像头互补使用。 | 易受天气和温度影响,最大测量距离一般只有几米 | 成本很高。不能全天候工作。遇浓雾、雨、雪天气无法工作 | 会受天气影响。只能探测到近距离的物体,难以识别出行人 | 与人眼一样会受到视野范围的影响 |
功能 | 主动推送方式 | 主动拉取方式 |
接口规范 | 由数据终端提供接口,数据源端调用接口推送数据 | 由数据源端提供接口,数据终端调用接口拉取数据 |
定时器 | 由推送方(数据源端)实现 | 由拉取方(数据终端)实现 |
缓存 | 在不影响正常运行的情况下,数据源端可不做缓存,实时获取并推送数据,消耗资源过大时做缓存 | 数据源端需要做缓存,以避免终端频繁拉取。若因参数值过多而致缓存过大时,应按调用方标识限制接口调用频次 |
截断标志 | 数据源端记录最后一次推送的数据ID,并在下一次推送时判断此标识往后推送数据 | 数据终端记录最后一次拉取的数据ID,并在下次一拉取时传递给数据源端 |
日志与故障排查 | 双方都需要保留日志 | 双方都需要保留日志 |
在有一个数据源端和多个数据终端的系统中 | 优点:无 缺点:数据源端需要依据不同的数据终端提供的接口规范推送数据,若这些数据终端要求的推送间隔时间不致,则会使用定时器和缓存实现更为复杂 | 优点:所有终端使用统一的接口规范,数据拉取间隔时间由终端自由决定 缺点:无 |
在有多个数据源端和一个数据终端的系统中 | 优点:所有数据源端使用统一的接口规范,数据推送间隔时间由数据源端自由决定 缺点:无 | 优点:无 缺点:数据终端需要依据不同的数据源端提供的接口规范拉取数据 |
iPhone 或安卓上传的照片,可能因横向或纵向拍摄,导致上传后照片显示成 90 度、180 度、270 度角旋转,使用 C# 处理该照片时同样会遇到相同的问题。
解决的方案:
客户端使用 base64 显示图片,可按正常方向显示,且不通过服务端即时显示。关键代码:
$('#file_input').change(function (e) {
if (e.target.files.length == 0) { return; }
// file 转换为 base64
var reader = new FileReader();
reader.readAsDataURL(e.target.files[0]);
reader.onload = function (event) {
$('#myImg').attr('src', event.target.result).css({ width: 'auto', height: 'auto' });
}
});
$('#myImg').on('load', function () {
console.log('图片加载完成')
});
但 base64 字符串传递到服务端受请求大小限制(一般比直接 POST 文件要小)。所以显示图片的同时应即时使用 POST 方式上传图片(如 jquery.fileupload.js)。
当然如果是在微信中打开网页,使用 JS-SDK 的 wx.chooseImage() 返回的 localId 也可以在 <img /> 中正常显示,然后使用 wx.uploadImage() 上传到微信服务器并获取 serverId,在通过获取临时素材接口取回图片文件。
服务端如果需要处理该图片(缩放、裁切、旋转等),需要先读取照片的拍摄角度,旋正后,再进行处理,相关 C# 代码:
/// <summary>
/// 调整照片的原始拍摄旋转角度
/// </summary>
/// <param name="img"></param>
/// <returns></returns>
private Image ImageRotateFlip(Image img)
{
foreach (var prop in img.PropertyItems)
{
if (prop.Id == 0x112)
{
switch (prop.Value[0])
{
case 6: img.RotateFlip(RotateFlipType.Rotate90FlipNone); break;
case 3: img.RotateFlip(RotateFlipType.Rotate180FlipNone); break;
case 8: img.RotateFlip(RotateFlipType.Rotate270FlipNone); break;
}
prop.Value[0] = 1;
}
}
return img;
}
使用 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