响应式 CSS 主要通过 ‌媒体查询（Media Queries）‌ 结合 ‌流式布局（百分比/Flexbox/Grid）‌ 来实现根据窗口宽度调整页面样式。其核心逻辑是：定义一套基础样式，然后使用 @media 规则设定特定的宽度断点（Breakpoints），当浏览器窗口宽度满足条件时，覆盖或补充相应的 CSS 属性。
媒体查询允许你根据设备特征（主要是屏幕宽度 width）应用不同的 CSS 规则。常用的条件包括：
    max-width: 当窗口宽度‌小于或等于‌指定值时生效（常用于“移动优先”策略）。
    min-width: 当窗口宽度‌大于或等于‌指定值时生效（常用于“桌面优先”策略）。
    手机端 (< 768px)‌：单列布局，字体较小，全宽显示。
    平板/小桌面 (≥ 768px)‌：双列布局，字体适中。
    大桌面 (≥ 1200px)‌：固定最大宽度，居中显示，字体较大。
在 HTML <head> 中必须包含 <meta name="viewport" content="width=device-width, initial-scale=1.0">。如果没有这行代码，移动浏览器会默认将页面缩放为桌面视图，导致媒体查询基于虚拟的桌面宽度而非实际设备宽度生效，从而破坏响应式效果。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1">
常见的标准断点参考：
    576px - 小型手机
    768px - 平板
    992px - 小型笔记本/桌面
    1200px - 大型桌面
通过上述方法，页面能够平滑地适应从手机到超大显示器的各种窗口宽度，提供最佳的用户体验。
<!-- 调用阿里巴巴矢量图标库 -->
<link rel="stylesheet" type="text/css" href="{{$public_host}}static/common/iconfont/iconfont.css?v={{$static_cache_version}}" />
使用图标‌：在 HTML 标签中添加 iconfont 基类和具体的图标类名 <i class="iconfont icon-search"></i>
‌样式调整‌：像设置文字一样设置图标的大小和颜色。
<style>
.iconfont{font-size:20px;color:red;}
</style>
Symbol 方式（官方推荐，支持多色）
引入 JS: 在 HTML 中引入生成的 iconfont.js 文件。
<script src="./iconfont.js"></script>
加入通用 CSS: 定义图标的通用样式，确保图标对齐和填充颜色跟随当前文字颜色。
<style>
.icon {width:1em;height:1em;vertical-align: -0.15em;fill:currentColor;overflow:hidden;}
</style>
使用图标‌：使用 svg 和 use 标签引用对应的 ID。
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

<span class="am-icon-caret-down"></span>
<i class="iconfont icon-weixin"></i>


<!-- Amaze UI 基于 jQuery 开发，因此在引入 Amaze UI 之前，‌必须先引入 jQuery 这是调用成功的关键前提。 -->
<link rel="stylesheet" type="text/css" href="{{$public_host}}static/common/lib/assets/css/amazeui.css?v={{$static_cache_version}}" />
主要有两种常见的引入方式：CDN 引入‌（推荐用于快速测试或生产环境）和‌本地文件引入‌。
使用 CDN 引入（最简单）
在 HTML 文件的 <head> 和 <body> 底部依次引入 CSS 和 JS 文件。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <title>Amaze UI 示例</title>
  <!-- 1. 引入 Amaze UI 样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/amazeui@2.7.2/dist/css/amazeui.min.css"/>
</head>
<body>


  <!-- 页面内容 -->
  <button class="am-btn am-btn-primary">按钮示例</button>

  <!-- 2. 引入 jQuery (必须在 amazeui.js 之前) -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@1.11.3/dist/jquery.min.js"></script>
  <!-- 3. 引入 Amaze UI JS -->
  <script type="javascript" src="https://cdn.jsdelivr.net/npm/amazeui@2.7.2/dist/js/amazeui.min.js"></script>
</body>
</html>
本地文件引入
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）：
<script>
$('#my-modal').modal({
  relatedTarget: this,
  closeViaDimmer: false,
  onConfirm: function(e) {
    // 确认后的逻辑
  }
});
</script>
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 使用组件。
<!-- Amaze UI开关 -->
<link rel="stylesheet" type="text/css" href="{{$public_host}}static/common/lib/amazeui-switch/amazeui.switch.css?v={{$static_cache_version}}" />
<!-- Amaze UI选择 -->
<link rel="stylesheet" type="text/css" href="{{$public_host}}static/common/lib/amazeui-chosen/amazeui.chosen.css?v={{$static_cache_version}}" />
<!-- Cropper v0.9.2图片容器 -->
<link rel="stylesheet" type="text/css" href="{{$public_host}}static/common/lib/cropper/cropper.min.css?v={{$static_cache_version}}" />
<!-- Amaze UI 标签输入 -->
<link rel="stylesheet" type="text/css" href="{{$public_host}}static/common/lib/amazeui-tagsinput/amazeui.tagsinput.css?v={{$static_cache_version}}" />
<!-- 轮播插件 -->
<link rel="stylesheet" type="text/css" href="{{$public_host}}static/common/lib/swiper/swiper.min.css?v={{$static_cache_version}}" />
<link rel="stylesheet" type="text/css" href="{{$public_host}}static/common/lib/swiper/swiper-bundle.min.css?v={{$static_cache_version}}" />
<!-- highlight代码高亮 -->
<link rel="stylesheet" href="{{$public_host}}static/common/lib/highlight/monokai_sublime.min.css?v={{$static_cache_version}}" />
<!-- wangEditor -->
<link rel="stylesheet" href="{{$public_host}}static/common/lib/wangeditor/wangeditor-5.1.23.css?v={{$static_cache_version}}" />
<!-- 公共css -->
<link rel="stylesheet" type="text/css" href="{{$public_host}}static/common/css/common.css?v={{$static_cache_version}}" />
<link rel="stylesheet" type="text/css" href="{{$public_host}}static/common/css/forminput.css?v={{$static_cache_version}}" />


在模板中正确输出（推荐）
使用 raw 过滤器
这是 ThinkPHP 官方推荐的方式。在模板文件中，使用 |raw 修饰符：
<!-- 错误写法：会被转义，显示源码 -->
{$article.content}
<!-- 正确写法：原样输出 HTML -->
{$article.content|raw}

注意：‌
  raw 必须放在过滤器链的‌最后‌。
  ‌安全风险‌：确保 $article.content 已经过后端的安全过滤（如白名单机制），否则直接输出用户提交的内容会导致 XSS 漏洞。

使用 htmlspecialchars_decode
如果内容被双重转义（例如显示为 &amp;nbsp;），可以先解码再输出，但通常 raw 更直接。
{:htmlspecialchars_decode($article.content)}

处理双重转义
如果数据显示为 &amp;nbsp;，说明被转义了两次。需要解码两次，或者检查存入数据库前是否多余调用了 htmlspecialchars。
<?php
// 第一次解码 &amp; -> &
$temp = htmlspecialchars_decode($article->content, ENT_QUOTES, 'UTF-8');
// 第二次解码 &nbsp; -> 空格 (如果需要)
$finalContent = htmlspecialchars_decode($temp, ENT_QUOTES, 'UTF-8');
?>








<!-- 视图初始化变量  common.php第206行 -->
// 静态文件状态css,js  
