登录 UCenter，添加应用
选择 DiscuzX，并填写名称和密钥等信息
正常的话，提交后会自动更新缓存文件 /uc_server/data/cache/apps.php，如果没有更新，检查添加这个文件的写入权限，并在后台更新缓存。
在编辑应用界面底部可以看到“应用的 UCenter 配置信息”
复制这段内容，粘贴到 /config/config_ucenter.php。
在 Discuz! 控制面板 - 站长 - UCenter 设置 中可以看到这些配置信息。标签名为灰色的是从配置文件读取的，无法在此修改。
返回 UCenter 中心的应用列表可以看到“通信成功”
本文记录于 2024 年 11 月。
| 升级前 | 期望（最新正式版） | 最终选择 | |
| 操作系统 | Alibaba Cloud Linux 3 | Alibaba Cloud Linux 3 | Alibaba Cloud Linux 3 |
| 管理面板 | 宝塔面板 Linux 版 9.2.0 | 宝塔面板 Linux 版 9.2.0 | 宝塔面板 Linux 版 9.2.0 |
| Web 服务 | nginx 1.24 | nginx 1.24 | nginx 1.24 |
| 脚本语言 | PHP 7.4 | PHP 8.2 | PHP 8.2 |
| 数据库 | PolarDB MySQL 5.6 | RDS MySQL 9.1 | PolarDB MySQL 8.0 |
| 论坛程序 | Discuz! X3.4 GBK | Discuz! X5.0 | Discuz! X3.5 UTF8 |
版本选择原因：
Discuz! X5 刚刚发布，生态尚未成熟，考虑到是老论坛升级，所以选择 X3.5。
Discuz! X3.5 目前最高支持 PHP 8.2、MySQL 8.0。
完整升级步骤：
购买新的 ECS、PolarDB，具体环境配置步骤参此文；
安装宝塔面板并配置；
安装 nginx 及 PHP；
创建网站、配置 SSL、伪静态、防盗链、可写目录禁执行、仅允许部分入口文件执行等（.conf）；
配置 hosts；
如果是正式升级阶段，关闭论坛，防止产生新数据。
备份原网站程序、PolarDB 数据库；
PolarDB 创建快照。
测试阶段：从快照还原到新实例（MySQL 5.6 不能直接恢复到 MySQL 8.0），然后从 5.6 迁移到 8.0.x；
正式阶段：全量模式直接从原实例迁移到 8.0.x，若增量模式且存在触发器，建议从快照还原；
上传原网站程序到新的站点目录下；
按 Discuz! X 升级文档升级 X3.4 至 X3.5；详情见下文 ↓；
升级完成后切换到 PHP 8；
配置 OSS、Redis、更新缓存等；
测试论坛基本功能是否正常；检查附件是否能够正常上传；检查附件是否正常显示；全面检查控制台配置；
逐个开启插件并检查兼容性（短信通、马甲引擎等）；
按二开备忘录逐个按需进行二开；
逐个修改调用论坛接口的项目及直接调用论坛数据库的项目；
调试 MAGAPP 接口；
尝试强制 https 访问；
将以上所有修改后的程序保留备份；发布升级公告并关闭论坛；重复以上步骤；修改域名解析；开启论坛；
配置 IP 封禁、定时器、日志、自动备份、配置其它 ECS 的 hosts 等；
查看搜索引擎中收录的地址，是否有无法访问的情况；
尝试将历史遗留的本地附件全部转移到 OSS；
建议 在新服上创建 3 个网站：
第 1 个用来尝试迁移、升级、二开，并测试所有功能；
第 2 个用来再次重复这些步骤，最终保留程序代码及 UGC 文件，作为最终的网站程序，以正式域名作为网站根目录路径；
第 3 个用来正式升级，主要功能是升级最新数据库。完成后修改第 2 个网站的数据库连接指向到最新的数据库，差异化同步新增的 UGC 文件到第 2 个网站。
Discuz! X 升级步骤及注意点：
因 PolarDB MySQL 不支持压缩，所以应移除 Discuz! 和 UCenter 代码中所有的 MYSQLI_CLIENT_COMPRESS，将 , MYSQLI_CLIENT_COMPRESS 替换为 /*, MYSQLI_CLIENT_COMPRESS*/。
升级前务必先修改 ./config/ 目录下的数据库/缓存连接信息，以防出现新站连接老库的情况；
按官方文档进行升级，升级前先修改一下：
【UC】先升级 UCenter 1.6 至 1.7。
将 /uc_server/data 权限改为 777 并递归。
打开 update_ucenter_adult.php 修改 $limit 值为 10000 以免执行超时。
因通信失败的“发送通知失败”可以直接改 URL 参数跳过就完成了，原因可能是因数据量大，发送改名通知执行改名时超时。等DZ升级完成后UC会自动重试改名通知，或单独写个 php 文件将 UCenter 的用户名同步到应用的数据库。
【DZ】运行到 /install/update_adult.php?step=innodb&table=pre_common_member_grouppm 时报错：Duplicate key name 'gpmid' ALTER TABLE common_member_grouppm ADD INDEX gpmid(gpmid);
解决方法：先删除索引，因保存时提示失败，应同时取消 gpmid 字段的自增，转换成功后再设置自增。
【DZ】运行到 /install/update_adult.php?step=file 一片空白而停止
正在解决
【问题】common_menber 表用户名字段编码转换失败
原因是部分用户名包含特殊字符（如全角空格），用以下语句查看两个表同一 uid 的不同用户：
SELECT u.uid, u.username AS ucenter_username, c.username AS common_username FROM pre_ucenter_members u JOIN pre_common_member c ON u.uid = c.uid WHERE u.username <> c.usernameDiscuz! 用户登录都是以 UCenter 中的用户名为主，所以可以写个小程序直接将 pre_ucenter_members 的用户名同步到 pre_common_member 中，另外 pre_ucenter_members 的用户数少于 pre_common_member 是正常的。若 pre_common_member_archive 表遇到错误同理。
如果用户登录慢，或打开 UCenter 慢，是因为 UC 正在通知 DZ 改用户名，每次打开一个页面会更改一个用户名，具体可以查看 pre_ucenter_notelist 中 closed 为 0 的队列，或进入 UC 后台-数据列表-通知列表 查看。
【问题】发布主题遇到错误：(1062) Duplicate entry '*' for key 'pid'
【原因】forum_post 中的 pid 不是自动增长的，而是由表 forum_post_tableid 中自动增长的 pid 生成的。如果生成的 pid 值已在 forum_post 表中存在，则会出现此错误。
【解决】迁移数据库时应关闭论坛，以防止 forum_post 表有新数据插入。
【问题】打开帖子页面 ./thread-***-1-1.html 显示 404 Not Found，而 ./forum.php?mod=viewthread&tid=*** 可以正常打开
【原因】未配置伪静态（可在宝塔面板中选择）
【问题】打开 UCenter 时报错：UCenter info: MySQL Query Error SQL:SELECT value FROM [Table]vars WHERE name='noteexists'
【解决】打开文件 ./uc_server/data/config.inc.php 配置数据库连接
【问题】打开登录 UCenter 后一片空白
【解决】将目录 ./uc_server/data/ 设为可写
需要将原来安装的插件文件移回 ./source/plugin/ 目录，并设置可写；
界面-表情管理，界面-编辑器设置-Discuz!代码
后续 Discuz! X3.5 小版本升级注意事项：
确认插件是否支持新版本（如短信通）
先创建一个新网站测试二开代码
保留 /config/、/data/、/uc_client/data/、/uc_server/data/、/source/plugin/，其它移入 old
上传文件
移回其它需要的文件，如：
-- 勋章/loading/logo/nv 等：/static/image/common/
-- 表情：/static/image/smiley/
-- 水印：/static/image/common/watermark.*
-- 风格：/template/default/style/t2/nv.png 等
-- 默认头像：/uc_server/images/noavatar_***.gif
-- 根目录 favicon.ico 等
-- 及其它非 DZ 文件
再次检查可写目录的写入权限和禁止运行 PHP 效果。
解析域名（非网站域名）、修改实例名称、主机名
设置阿里云（重要）
远程连接进入 ECS（若解析未生效可以先用 IP）（若新服默认使用 22 端口，可在阿里云控制台登录系统，或先在安全组临时放行 22 端口）
修复系统漏洞
将磁盘挂载到目录（fdisk、df 命令参考：https://xoyozo.net/Blog/Details/SSH）
安装宝塔面板（本文以宝塔面板方案为例，选择任何你喜欢的环境部署方案都行）。可以在阿里云控制台ECS实例页安装扩展程序
临时放行宝塔面板端口，进入宝塔面板（http方式），或用命令更改宝塔面板端口
配置面板 SSH、添加新的安全端口、面板设置
更改 SSH 默认端口（参：https://xoyozo.net/Blog/Details/change-default-port）
安装 nginx、PHP 等
配置 PHP 扩展（Redis、sqlsrv（注意选择兼容的版本）、memcached 及端口）
创建网站，配置网站（路径、伪静态等）
迁移网站文件（参：https://xoyozo.net/Blog/Details/SSH）
仔细对比新旧网站的配置文件（特别是 .php 的访问权限，参：https://xoyozo.net/Blog/Details/nginx-location-if）
设置写入目录（使用 rsync 同步的文件会同步用户和权限）
解析域名（先改 hosts 测试网站功能）
更改内网其它 ECS 上的 hosts
关闭原 ECS（能马上发现问题，不然等运行一段时间才发现问题就麻烦点）
设置 FTP
迁移“计划任务”
所有网站和软件的配置文件都要使用 WinMerge 进行对比
移除“宝塔面板-安全”和“阿里云-ECS-安全组”中不用的端口
再次检查阿里云设置
私网中若有 ECS 的 hosts 中域名直接绑定到私网 IP 的，做相应更改
其它：ERP添加到期提醒、WAF增加ECS、备份工具增加ECS
更多文章：
解析域名（非网站域名）、挂载磁盘（若有另购）、修改实例名称、主机名
设置阿里云（重要）
远程连接进入 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 等工具定时同步文件，或直接停止原网站。（网友会遇到新文章中图片无法显示等问题）
还有一种方法是新网站提前解析一个备用域名，确保完全生效后再修改正式域名的解析，原网站无条件跳转到备用域名，如果数据库中有保存完整网址路径的，关闭原网站并解绑备用域名之后，进行批量替换。（缺点是可能会影响在搜索引擎的网站权重）
部分有定时器的网站要注意，如果两个网站的定时器都正常开启会导致意外的，需要停止其中一个网站的定时器。
当然每种方法都有优缺点，选择可以接受且方便的一种即可。
更多文章：
错误 TS5055 无法写入文件“***.js”，因为它会覆盖输入文件。
添加 tsconfig.json 文件有助于组织包含 TypeScript 和 JavaScript 文件的项目。有关详细信息，请访问 https://aka.ms/tsconfig。
检查“输出”窗口，找到“error”的行，并修复该错误。
一种可能的情况是，使用了 vue3 的 computed 计算属性。原因未知，尝试又定义了一个变量并使用 watch 侦听原变量来给它赋值，同样报错。
首先，禁止网站下所有 .php 等文件均不允许被访问到。
在 nginx 网站配置文件中，include enable-php-**.conf; 上方插入：
location ~ ^/.*\.(php|php5|py|sh|bash|out)$ { deny all; }其中，^ 匹配开始，/.* 匹配所有目录和文件名，\.(php|php5|py|sh|bash|out) 匹配文件后缀名，$ 匹配结束。
即便如此，仍然忽略了 nginx 中 .php 文件名后加斜杠仍然能访问到的情况，譬如我们访问这个网址：
https://xoyozo.net/phpinfo.php/abc.htmlnginx 仍然运行了 phpinfo.php，给了后门可趁之机，所以改进为：
location ~ ^/.*\.(php|php5|py|sh|bash|out)(/.*)?$ { deny all; }Discuz! X3.4 需要写入权限的目录：
/自研目录/upload/
/config/
/data/
/uc_client/data/
/uc_server/data/
/source/plugin/
但，这些都不重要，我们已经禁止了所有目录的 .php 访问了。
第二步，解禁需要直接被访问到的文件路径。
Discuz! X3.4 根目录下的 .php 文件都是入口文件，需要能够被访问到：
/admin.php
/api.php
/connect.php
/forum.php
/group.php
/home.php
/index.php
/member.php
/misc.php
/plugin.php
/portal.php
/search.php其它目录中需要被直接访问到的文件：
/archiver/index.php
/m/index.php
/uc_server/admin.php
/uc_server/avatar.php
/uc_server/index.php部分插件文件需要能够被直接访问到：
/source/plugin/magmobileapi/magmobileapi.php
/source/plugin/smstong/accountinfo.php
/source/plugin/smstong/checkenv.php另外如果有自建目录需要有 .php 访问权限，那么也需要在此处加白，本文以 /_/ 目录为例
最终拼成：工具
location ~ ^(?:(?!(/admin\.php|/api\.php|/connect\.php|/forum\.php|/group\.php|/home\.php|/index\.php|/member\.php|/misc\.php|/plugin\.php|/portal\.php|/search\.php|/archiver/index\.php|/m/index\.php|/uc_server/admin\.php|/uc_server/avatar\.php|/uc_server/index\.php|/source/plugin/magmobileapi/magmobileapi\.php|/source/plugin/smstong/accountinfo\.php|/source/plugin/smstong/checkenv\.php|/_/.*\.php))/.*\.(php|php5|py|sh|bash|out)(/.*)?)$ { deny all; }这里用到正则表达式中的“不捕获”和“负向零宽断言”语法，格式为：
^(?:(?!(允许的目录或文件A|允许的目录或文件B))禁止的目录和文件)$值得注意的是，此句负向零宽断言中的匹配内容是匹配前缀的，也就是说
https://xoyozo.net/index.php
https://xoyozo.net/index.php/abc.html都可以访问到，而
https://xoyozo.net/forbidden.php
https://xoyozo.net/forbidden.php/abc.html都访问不到，这是符合需求的。
如果自建目录 /_/ 下有写入需求，单独禁止即可，以 /_/upload/ 为例：
location ~ ^/_/upload/.*\.(php|php5|py|sh|bash|out)(/.*)?$ { deny all; }ThinkPHP 网站有统一的访问入口，可按本文方法配置访问权限。
特别注意：上面的代码必须加在 PHP 引用配置（include enable-php-**.conf;）的上方才有效。
Senparc.Weixin.Sample.MP 盛派微信公众平台示例项目在 VS 中运行正常，当发布到 IIS 后出现应用程序池自动停止的情况，在服务器管理器中找到 .NET Runtime 错误，可以看到错误原因：
\App_Data\SenparcTraceLog 目录需要写入权限。
以下目录也需要写入权限：
\App_Data\WeChat_OfficialAccount
\App_Data\NeuChar
本文记录于 2021 年 9 月。
| 升级前 | 期望（最新正式版） | 最终选择 | |
| 操作系统 | CentOS 6.5 | Alibaba Cloud Linux 3 | Alibaba Cloud Linux 3 |
| 管理面板 | lnmp | 宝塔面板 Linux 版 7.7.0 | 宝塔面板 Linux 版 7.7.0 |
| Web 服务 | nginx 1.6 | nginx 1.21 | nginx 1.21 |
| 脚本语言 | PHP 5.6 | PHP 8.0 | PHP 7.4 |
| 数据库 | RDS MySQL 5.6 | RDS MySQL 8.0 | RDS MySQL 5.6 |
| 论坛程序 | Discuz! X3.2 GBK | Discuz! X3.5 UTF-8（即将发布） | Discuz! X3.4 GBK |
版本选择原因：
Alibaba Cloud Linux 完全兼容 CentOS，相比于 CentOS 较短的生命周期，Alibaba Cloud Linux 3 将于 2029 年 4 月 30 日结束生命周期。
Discuz! X3.4 不支持 PHP 8.0，安装时即报错，打开页面时一片空白。
MySQL 8.0 和阿里云 RDS 的 MySQL 7.5 不支持 MyISAM，而数据表 pre_common_member_grouppm 和 pre_forum_post 使用联合主键且自动递增字段不是第一主键，使用 InnoDB 引擎创建表时会报“1075 - Incorrect table definition; there can be only one auto column and it must be defined as a key”错误，而擅自更改主键次序会影响业务逻辑。因此，在必须选择阿里云 RDS 的情况下，只能选择 MySQL 5.6。（2023年8月注：查看如何更改为 InnoDB）
Discuz! X3.5 正式版尚未发布（截止发稿），即便发布，插件也可能不能得到及时更新。相比之下，X3.4 首个版本发布距今已有 4 年，相关第三方插件已经非常成熟。
完整升级步骤：
备份原网站程序、RDS 数据库；
购买新的 ECS、RDS，挂载磁盘，安装云监控；
迁移（或还原）数据库到新的 RDS；
安装宝塔面板并配置；
安装 nginx 及 PHP；
创建网站、配置 SSL、伪静态、防盗链、可写目录禁执行等（.conf）；
配置 hosts；
上传原网站程序到新的站点目录下；
按 Discuz! X 升级文档升级 X3.2 至 X3.4；详情见下文 ↓；
配置 OSS、Redis、更新缓存等；
测试论坛基本功能是否正常；检查附件是否正常显示；全面检查控制台配置；
逐个开启插件并检查兼容性；
按二开备忘录逐个按需进行二开；
逐个修改调用论坛接口的项目及直接调用论坛数据库的项目；
调试 MAGAPP 接口；
尝试强制 https 访问；
将以上所有修改后的程序保留备份；发布升级公告并关闭论坛；重复以上步骤；修改域名解析；开启论坛；
配置 IP 封禁、定时器、日志、自动备份、配置其它 ECS 的 hosts 等；
查看搜索引擎中收录的地址，是否有无法访问的情况；
尝试将历史遗留的本地附件全部转移到 OSS；
参这篇文章，可能有其它需要配置的地方。
Discuz! X 升级步骤及注意点：
升级前务必先修改 ./config/ 目录下的数据库/缓存连接信息，以防出现新站连接老库的情况；
按官方文档进行升级；
【问题】运行到 ./install/update.php?step=data&op=notification 时白屏。
【排查】尝试切换到 PHP 5.6 后成功（但该版本过于陈旧不能使用）；尝试升级 CPU 和内存 PHP 7.4 上升级仍不成功。
【原因】DB::result_first() 方法不对 SQL 语句追加“limit 1”，而是 SELECT 所有记录后在 PHP 端取第一条数据；
【解决】打开文件 update.php，查找 elseif($_GET['op'] == 'notification')，该节点的功能是在表 home_notification 中查找 category <= 0 的数据并修复它，如果数据库中所有 category 都大于 0，直接注释其内部 if 代码段继续升级即可（或改为 if(false && ...)）。
【问题】发布主题遇到错误：(1062) Duplicate entry '*' for key 'pid'
【原因】forum_post 中的 pid 不是自动增长的，而是由表 forum_post_tableid 中自动增长的 pid 生成的。如果生成的 pid 值已在 forum_post 表中存在，则会出现此错误。
【解决】迁移数据库时应关闭论坛，以防止 forum_post 表有新数据插入。
【问题】打开帖子页面 ./thread-***-1-1.html 显示 404 Not Found，而 ./forum.php?mod=viewthread&tid=*** 可以正常打开
【原因】未配置伪静态（可在宝塔面板中选择）
【问题】打开 UCenter 时报错：UCenter info: MySQL Query Error SQL:SELECT value FROM [Table]vars WHERE name='noteexists'
【解决】打开文件 ./uc_server/data/config.inc.php 配置数据库连接
【问题】打开登录 UCenter 后一片空白
【解决】将目录 ./uc_server/data/ 设为可写
需要将原来安装的插件文件移回 ./source/plugin/ 目录，并设置可写；
界面-表情管理，界面-编辑器设置-Discuz!代码
后续 Discuz! X3.4 R 小版本升级注意事项：
确认插件是否支持新版本（如短信通）
先创建一个新网站测试二开代码
保留 /config/、/data/、/uc_client/data/、/uc_server/data/、/source/plugin/，其它移入 old
上传文件
移回其它需要的文件，如：
-- 勋章/loading/logo/nv 等：/static/image/common/
-- 表情：/static/image/smiley/
-- 水印：/static/image/common/watermark.*
-- 风格：/template/default/style/t2/nv.png 等
-- 默认头像：/uc_server/images/noavatar_***.gif
-- 根目录 favicon.ico 等
-- 及其它非 DZ 文件
再次检查可写目录的写入权限和禁止运行 PHP 效果。
使用 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
数据表所占用的空间（简称“表空间”）一般会大于其数据空间和索引空间的和。
当数据被删除时，其所占空间并不会立即释放，而是等待新数据写入，这会导致出现许多磁盘碎片。使用 OPTIMIZE TABLE 或 ALTER TABLE 可以回收碎片，重组文件。优化表的过程类似于 Windows 碎片整理。
操作过程会导致该表上的写操作无法执行。
一般在删除了大批量数据或更改了许多可变长度字段后执行优化表。
碎片率 = 100% - (数据空间 + 索引空间) / 表空间
优化后碎片率接近于 0%，数据空间和索引空间也会变小，此时 表空间 接近于“数据空间 + 索引空间”
在 MyISAM 引擎上遇到优化后导致获取行数为 0，SELECT 数据只有 1 条的情况，需要执行修复表（REPAIR TABLE），使数据恢复正常。执行后结果显示：Number of rows changed from 0 to xxxxxx