使用 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
项目 "***" 指向“netstandard2.1”。它不能被指向“.NETFramework,Version=v4.8”的项目引用。
可能的原因是：Standard 库项目中存在一些警告，譬如 NuGet 包中的 Newtonsoft.Json 12.0.3 可能不兼容 Standard 2.1
解决这些警告，Web 项目再重新引用库项目即可正常发布。
Discuz! 的“词语过滤”支持替换功能，并且借用替换的思想实现禁止发布。
添加关键词举例：
| a=b | a 将被替换成 b |
| a={BANNED} | 包含 a 的内容将被禁止发布 |
| a={MOD} | 包含 a 的内容将进入人工审核通道 |
| a | a 将被替换成 ** |
另外注意几个要点：
替换前的内容可以使用限定符 {x} 以限定相邻两字符间可忽略的文字，x 是忽略的字节数。如 "a{1}s{2}s"(不含引号) 可以过滤 "ass" 也可过滤 "axsxs" 和 "axsxxs" 等等。对于中文字符，若使用 GBK、Big-5 版本，每个中文字符相当于 2 个字节；若使用 UTF-8 版本，每个中文字符相当于 3 个字节。
不良词语如果以"/"(不含引号)开头和结尾则表示格式为正则表达式，这时替换内容可用"(n)"引用正则中的子模式，如"/1\d{10}([^\d]+|$)/"替换为"手机(1)"。
不支持通配符。
系统在发帖时判断并替换过滤词语，数据库中保存的是替换后的内容。因此新添加的词语并不会对旧帖产生影响。
该功能对应数据库表：pre_common_word
不支持当前所选音轨的文件格式，因此无法播放视频。请尝试播放其它音轨，确认其是否支持。
打开“套件中心”，打开右上角“设置”，添加“套件来源”：http://packages.synocommunity.com/，名称如：SynoCommunity，确定。
切换到“常规”选项卡，将“信任层级”改为至少“Synology Inc. 和信任的发行者”。否则会提示以下错误：
安装 [ffmpeg] 失败。此套件并非由 Synology Inc. 发布。
在“套件中心”左侧会出现“社群”，找到“ffmpeg”安装。
如遇下载失败，多尝试几次。
或直接从官方网站下载 .spk 包：https://synocommunity.com/package/ffmpeg
在“套件中心”“手动安装”即可。
Microsoft.Net.Compilers is only supported on MSBuild v16.3 and above
解决办法：菜单 - 生成 - ASP.NET 编译 - 优化解决方案的生成性能
如果没有该项，在解决方案资源管理器中选中解决方案再试。
本文环境：CentOS 7、nginx 1.16、ASP.NET Core 3.0
安装 nginx，可以使用宝塔面板。
创建网站，保证网站静态页面能够正常访问。
必要时配置 SSL 证书。
安装 ASP.NET Core 运行时：
安装说明见：https://dotnet.microsoft.com/download，切换到 Linux，选择 Install .NET Core Runtime
选择操作系统，按页面说明安装即可。
发布一个 ASP.NET Core 项目到网站目录，运行应用程序：
dotnet 应用的程序集文件名.dll必须先 cd 到项目所在目录再执行，否则“Content root path”不会指向网站根目录，从而导致无法访问静态文件。
观察到端口为 5000（默认），该 Url 用于下一步设置反向代理。
配置 nginx 反向代理：（使用宝塔面板时建议使用面板中提供的“反向代理”功能）
location / { proxy_pass http://localhost:5000; }查看官方详细说明：使用 Nginx 在 Linux 上托管 ASP.NET Core
完整操作步骤如下：
安装 NuGet 包：
Microsoft.AspNet.Web.Optimization打开
Views目录（如果是应用于区域，则为区域的Views目录）中的 web.config，在<namespaces />节点中添加<add namespace="System.Web.Optimization" />在
App_Start目录中创建类文件BundleConfig.cs，更改其命名空间为应用程序的默认命名空间（即移除.App_Start），创建方法：public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new StyleBundle("~/虚拟路径（不能有点）").Include("~/CSS文件路径")); bundles.Add(new ScriptBundle("~/虚拟路径（不能有点）").Include("~/JS文件路径")); }虚拟路径应避免与页面访问路径相同。Include 可包含多个文件，效果是合并输出，注意引用的顺序。
打开
Global.asax，在Application_Start()事件中添加代码BundleTable.EnableOptimizations = true; // 该设置使在开发模式中实现压缩代码，不设置则仅在发布后压缩代码 BundleConfig.RegisterBundles(BundleTable.Bundles);视图页面中引用样式表或脚本
@Styles.Render("~/CSS虚拟路径") @Scripts.Render("~/JS虚拟路径")使用 Render 的好处是，ASP.NET 会自动给引用地址加上参数，可在更改脚本或样式表内容后更改这些参数使浏览器缓存立即失效。
如果你的项目中已经安装并使用 Bundle，那么只需要参考第 4 步，将 BundleTable 的 EnableOptimixations 设为 true。
以下是一些常见异常的解决方法：
The name 'Styles' does not exist in the current context
The name 'Scripts' does not exist in the current context
解决：参步骤 2。
引用的样式表或脚本不存在（报 404 错误）
解决：步骤 3 中的虚拟路径不规范。
传统的 LIKE 模糊查询（前置百分号）无法利用索引，特别是多个关键词 OR，或在多个字段中 LIKE，更是效率低下。本文研究对文章进行分词以提高检索的准确度和查询效率。
根据自己的编程语言选择一款合适的中文分词组件，我在 ASP.NET 平台下选择了 jieba.NET。
设想的步骤：
分别对文章标题、标签、正文进行分词，保存到一张分词表上。该表把“文章 ID”和“词语”设为联合主键，用 3 个字段记录该词语分别在标题、标签、正文中出现的次数，另外还可以按需要添加文章分类 ID、文章创建时间等字段。
当用户输入关键词进行检索时，先将关键词分词，在分词表中用 in 语法查询到所有相关的记录；
使用 group by 语法对查询结果按文章 ID 分组；
关键在排序上，理想的排序是：
a. 先按搜索关键词中不同词语的出现量排序，即：若搜索关键词分词后是 3 个词语，那么全部包含这 3 个词的文章优先，只匹配其中 2 个词语的其次；
b. 再按搜索关键词在文中累计出现的次数排序（考虑权重），即：我们先假定标题和标签的分词权重为 5（意思是一个分词在标题中出现 1 次相当于在正文中出现 5 次），那么累加每个分词在标题、标签、正文的权重次数，得分高的优先；
c. 再进一步考虑文章的发布时间，即将文章的发布时间距离最早一篇文章的发布时间（或一个较早的固定日期）相隔的天数，乘以一个系数加入到权重中，这个系数按不同文章分类（场景）不同，比如新闻类的大一点，情感类的小一点）。乘以系数时一篇文章只加权一次，不要加权到每个分词。
d. 根据需求还可以加入文章热度（阅读数）的权重。
根据上述逻辑对一个有 18 万篇文章的内容管理系统进行改造，循环所有文章进行分词统计，得到一张包含 5 千万条记录的分词表（系统中部分文章只有标题、标签和外链，没有正文，否则更多）。
由于查询中包含 in、group by、count、sum、运算等，再若分类是无级限的，即文章分类 ID 也是 in 查询，然后分页，即使创建索引，效率也只能呵呵了。
简化：
不对正文进行分词；
不按权重进行排序；
那么分词表的记录数降到 250 万条，同样用 in 查询分词，先按搜索关键词中不同词语的出现量排序，再按发布时间排序，分页后获得一页的文章 ID 集合，再去文章表中 in 获取详细信息（注意保持一页中的排序）。
添加相关索引后，查询一个包含 3 个分词的关键词仅需十几毫秒。因为 in 的内容比较离散，所以索引的利用率比较高。
使用会话状态服务器（StateServer）管理会话状态，可防止网站发布后会话丢失，参 ASP.NET 网站每次发布后丢失 Session 怎么办？
查询数据库时，尽量使用 using 包裹 db 上下文，或者 db.Dispose()，或重写 Dispose()，可以减少数据库连接数（Sleep），参 如何减少 ASP.NET 连接 MySQL 时的 Sleep 查询（即时关闭数据库上下文）
发布时使用预编译功能，参 彻底告别 .NET 网站首次访问速度慢的问题
清理日志不要这样写（先读取再删除）：
db.dt_log.RemoveRange(db.dt_log.Where(c => c.time < dt).OrderBy(c => c.time).Take(count));SQL Server 应该：
db.Database.ExecuteSqlCommand($"DELETE FROM {nameof(db.dt_log)} WHERE {nameof(l.id)} IN (SELECT TOP {count} {nameof(l.id)} FROM {nameof(db.dt_log)} WHERE {nameof(l.time)} < '{dt.ToString("yyyy-MM-dd HH:mm:ss")}' ORDER BY {nameof(l.time)})");注意时间可能需要使用 convert 函数转化，给 time 字段添加索引。
MySQL 应该：
db.Database.ExecuteSqlCommand($"DELETE FROM {nameof(db.dt_log)} WHERE {nameof(l.time)} < '{dt.ToString("yyyy-MM-dd HH:mm:ss")}' ORDER BY {nameof(l.time)} LIMIT {count}");给 time 字段添加索引。
未完待续