引子

我对Jekyll的基本样式、模板嵌套有一些修改，同时也记录自定义前端样式美化的配置。

多种文章风格

对于博客的布局，分别设置了中篇文章、大纲文章、短篇文章3种布局，layout设定分别对应article、outlined、eassy。中篇文章一般是500-1000字左右，长篇文章一般采用大纲，短篇是100-500字的临时想法记录。3种布局共用同一套视觉语言，分别是灰白黄、浅灰卡片、细边框、赭黄点缀，只在宽度、留白、元素密度上区分。

适配屏幕尺寸

在需求上希望考虑适配常见分辨率和屏幕尺寸的设备屏幕。这里涉及硬件物理层面的概念、系统逻辑层面、网页逻辑层面的概念。

硬件层面屏幕相关概念

1. 屏幕尺寸：屏幕对角线的物理长度，单位是英寸（inch）。需要注意的是屏幕尺寸只描述物理对角线长度，不直接决定清晰度。同样 27 英寸，1080P 和 4K 的细腻程度差别很大，所以需要结合分辨率看 PPI。
2. 物理分辨率：设备屏幕的像素数量，屏幕是由一个个发光点组成的，发光点就是一个物理像素（device pixel），无法通过软件改变。它是硬件层面的最小显示单元，无法显示半个物理像素。比如 1920×1080，意思是横向 1920 个发光点、纵向 1080 个发光点，总共约 207 万个。
3. PPI（Pixels Per Inch，每英寸像素数）：PPI 衡量的是硬件层面的像素密度，决定了屏幕在物理上能细腻到什么程度，决定了屏幕画面物理细腻程度、颗粒感。

Windows层面屏幕相关概念

在软件层面，考虑以下几个概念：

1. 逻辑像素（DIP，Device-Independent Pixel，设备无关像素）：是指系统或软件布局和绘制时的最小单元，或者系统或软件认定的设备屏幕大小。在 Windows 开发中，DIP 与物理像素的换算关系是：DIP = 物理像素 × 96 / DPI。在 Web 前端语境里，当页面缩放为 100% 时，1 个 CSS 像素通常就对应 1 个 DIP。
2. 逻辑分辨率：逻辑分辨率则是用 DIP 为单位表示的屏幕或视口尺寸，比如 1920×1080 个 DIP，其单位是逻辑像素。
3. DPI（Dots Per Inch，每英寸的逻辑像素）：在 Windows 显示设置语境里，表示系统在逻辑层面每英寸安排多少个 DIP。 Windows 以 96 DPI 对应 100% 缩放作为基准。当缩放 100% → DPI = 96，此时，系统认为每英寸在逻辑时配置96个逻辑像素，1个逻辑像素对应1个物理像素。缩放 125% → DPI = 120，此时，系统认为每英寸在逻辑时配置120个逻辑像素，1个逻辑像素对应1.25个物理像素。可以依次类推，缩放 150% → DPI = 144，缩放 200% → DPI = 192。
4. 系统缩放比：一般来说1080P屏幕的DPR是1或1.25，Windows下1.25和1.5非常常见，由于不是整数倍，程序实际渲染时，可能取整和抗锯齿导致出现模糊感，4K屏幕采用1.5倍（ 27 英寸）/2倍（24英寸）缩放，MacBook、手机的缩放比是2，在手机上 2K 的像素密度已经超过肉眼能分辨的精细程度，300 PPI 是一般观看距离下的经验阈值，2K 手机 PPI 通常 400-500+，4K 在手机上的收益很小，反而更耗电，所以厂商普遍不热衷。

1
2
3
# Windows开发的逻辑像素
DIP = 物理像素 × 96 / DPI
PPI = √(横向像素² + 纵向像素²) ÷ 屏幕尺寸

网页层面屏幕相关概念

对于网页端，适配窗口大小无需考虑屏幕的物理尺寸，应该考虑CCS宽度。

1. DPR（Device Pixel Ratio，设备像素比）是web开发中的概念，表示一个 CSS 像素对应多少个物理像素。默认等于系统缩放比，但是实际情况会叠加一个浏览器缩放。 1080P分辨率宽1920，DPR为1时，CSS宽度为1920；4K分辨率显示器宽3840，DPR为1.5时，CSS宽度为2560；4K分辨率显示器宽3840，DPR为2时，CSS宽度为1920
2. CSS宽度：浏览器视口（viewport）的宽度，用 CSS 像素来度量，即web中的px。

1
2
DPR = 屏幕PPI ÷ 系统缩放比
CSS 宽度 = 物理分辨率 ÷ DPR

常见桌面分辨率

同样 4K 屏，设置系统缩放不同，CSS 宽度会很多。

不同系统缩放下的CSS宽度对比

文章特性

目前文章特性自定义设置了表格、latex、ai声明等特性，分别对应以下代码

1
2
3
4
5
6
7
8
---
layout: post
title: 某篇文章
features:
    table
    math
    ai-notice
---

代码样式

highlight和围栏代码块的区别

两者都能渲染代码，但走的路径不同，能力上有一些细节差异。

围栏代码块是Markdown 原生能力。

1
2
3
4
5
```go
func main() {
    fmt.Println("hi")
}
```

生成的代码如下：

1
2
3
4
5
<div class="language-go highlighter-rouge">
  <div class="highlight">
    <pre class="highlight"><code>...</code></pre>
  </div>
</div>

highlight 标签Jekyll的Liquid模板语法

1
2
3
4
5
{% highlight go %}
func main() {
    fmt.Println("hi")
}
{% endhighlight %}

highlight 标签生成：

1
2
3
<figure class="highlight">
  <pre><code class="language-go" data-lang="go">...</code></pre>
</figure>

异同：

• Liquid 标签。Jekyll 会先解析 Liquid，处理Liquid代码标签逻辑再渲染 Markdown。围栏代码块不做处理直接输出。
• 围栏代码块想开行号，需要在 _config.yml 里全局设置：

1
2
3
4
kramdown:
  syntax_highlighter_opts:
    block:
      line_numbers: true

或者

1
2
3
4
```go
func main() {}
```
{: .no-lineno}

Liquid可以在代码块中指定

1
2
{% highlight go linenos %}
{% endhighlight %}

当前页面屏幕/视口诊断

以下数值由浏览器在页面加载时实时写入，打开本页即可看到你当前设备的实际值。

注意：screen.width 返回的是逻辑分辨率（CSS 像素），受系统缩放比影响。 真实物理像素 = 逻辑分辨率 × devicePixelRatio。浏览器最大化时 innerWidth 才接近 CSS 宽度。

换算公式回顾

1
2
3
4
5
物理分辨率 = screen.width × devicePixelRatio       ← 屏幕真实像素，4K屏会显示 3840×2160
逻辑分辨率 = screen.width                          ← CSS 像素，受系统缩放影响（4K 150% 缩放 = 2560）
CSS 视口宽 = window.innerWidth                     ← 当前浏览器窗口 CSS 宽（窗口非最大化时 ≠ 屏幕）
DPR        = 浏览器缩放 × 系统缩放比
内容最佳宽  ≈ 720 px（英文 ~80 词/行，中文 ~36 字/行）