响应式 CSS 主要通过 媒体查询（Media Queries） 结合 流式布局（百分比/Flexbox/Grid） 来实现根据窗口宽度调整页面样式。其核心逻辑是：定义一套基础样式，然后使用 @media 规则设定特定的宽度断点（Breakpoints），当浏览器窗口宽度满足条件时，覆盖或补充相应的 CSS 属性。
媒体查询允许你根据设备特征（主要是屏幕宽度 width）应用不同的 CSS 规则。常用的条件包括：
max-width: 当窗口宽度小于或等于指定值时生效（常用于“移动优先”策略）。
min-width: 当窗口宽度大于或等于指定值时生效（常用于“桌面优先”策略）。
手机端 (< 768px)：单列布局，字体较小，全宽显示。
平板/小桌面 (≥ 768px)：双列布局，字体适中。
大桌面 (≥ 1200px)：固定最大宽度，居中显示，字体较大。
在 HTML 中必须包含 。如果没有这行代码，移动浏览器会默认将页面缩放为桌面视图，导致媒体查询基于虚拟的桌面宽度而非实际设备宽度生效，从而破坏响应式效果。
常见的标准断点参考：
576px - 小型手机
768px - 平板
992px - 小型笔记本/桌面
1200px - 大型桌面
通过上述方法，页面能够平滑地适应从手机到超大显示器的各种窗口宽度，提供最佳的用户体验。
使用图标：在 HTML 标签中添加 iconfont 基类和具体的图标类名
样式调整：像设置文字一样设置图标的大小和颜色。
Symbol 方式（官方推荐，支持多色）
引入 JS: 在 HTML 中引入生成的 iconfont.js 文件。
加入通用 CSS: 定义图标的通用样式，确保图标对齐和填充颜色跟随当前文字颜色。
使用图标：使用 svg 和 use 标签引用对应的 ID。
主要有两种常见的引入方式：CDN 引入（推荐用于快速测试或生产环境）和本地文件引入。
使用 CDN 引入（最简单）
在 HTML 文件的 和 底部依次引入 CSS 和 JS 文件。
Amaze UI 示例
本地文件引入
1、下载 Amaze UI 压缩包并解压。
2、将 css 和 js 文件夹复制到项目目录中。
3、按照以下顺序在 HTML 中引用：
在link中 引入 amazeui.min.css
在script中 引入 jquery.min.js 和 amazeui.min.js
4、基本使用方法
引入文件后，即可通过添加特定的 CSS 类名来使用组件，或通过 JavaScript 调用交互组件。
CSS 组件调用：直接给 HTML 元素添加类名。
例如：class="am-btn am-btn-primary" 创建一个主要样式的按钮。
例如：class="am-g" 创建网格布局容器。
JS 组件调用：通过 jQuery 选择器选中元素，然后调用对应的方法。
例如：初始化模态框（Modal）：
5、关键注意事项
引入顺序：务必保证 jQuery -> Amaze UI JS 的顺序，否则 JS 组件无法正常工作。
盒模型：Amaze UI 默认将所有元素的 box-sizing 设置为 border-box，这在布局计算时需要注意，padding 和 border 会包含在宽度内。
响应式断点：利用其网格系统（如 am-u-sm-*, am-u-md-*）可以方便地实现不同屏幕尺寸下的布局适配。
总结来说，调用 Amaze UI 的核心就是：先引 jQuery，再引 Amaze UI 的 CSS/JS，最后通过类名或 JS API 使用组件。
在模板中正确输出（推荐）
使用 raw 过滤器
这是 ThinkPHP 官方推荐的方式。在模板文件中，使用 |raw 修饰符：
{$article.content}
{$article.content|raw}
注意：
raw 必须放在过滤器链的最后。
安全风险：确保 $article.content 已经过后端的安全过滤（如白名单机制），否则直接输出用户提交的内容会导致 XSS 漏洞。
使用 htmlspecialchars_decode
如果内容被双重转义（例如显示为 ），可以先解码再输出，但通常 raw 更直接。
{:htmlspecialchars_decode($article.content)}
处理双重转义
如果数据显示为 ，说明被转义了两次。需要解码两次，或者检查存入数据库前是否多余调用了 htmlspecialchars。
&
$temp = htmlspecialchars_decode($article->content, ENT_QUOTES, 'UTF-8');
// 第二次解码 -> 空格 (如果需要)
$finalContent = htmlspecialchars_decode($temp, ENT_QUOTES, 'UTF-8');
?>
// 静态文件状态css,js