Sublime Text 本身不直接参与 H5 页面的响应式适配或 REM 计算，但可通过 Emmet、CSSrem、LiveStyle、Snippet 和 PostCSS 工具链提升开发效率。
Sublime Text 本身不直接参与 H5 页面的响应式适配或 REM 计算，但它作为高效轻量的代码编辑器，能通过插件、快捷操作和配置显著提升移动端适配开发效率。关键在于：用好工具链辅助写对代码，而不是指望编辑器“自动适配”。
安装 Emmet + CSS Rem 单位快速输入插件
Emmet 是 Sublime 的标配增强插件，支持缩写生成 HTML 结构（如 .box*3 → 3 个 div.box）。配合自定义 Snippet 或第三方插件（如 CSSrem），可实现输入 16px 回车后自动转为 1rem（基于设计稿基准 16px = 1rem）。
- 安装 Package Control 后，搜索安装 Emmet 和 CSSrem
- 在插件设置中指定根字体大小（如 html { font-size: 37.5px; } 对应 750px 设计稿下 1rem = 10px）
- 写 CSS 时输入 20px → 按 Tab 或 Ctrl+Shift+P → “Convert px to rem”，即可得 2rem
用 LiveStyle 实时同步样式修改（需搭配浏览器插件）
开发 H5 响应式页面常需反复调整断点和 rem 值。LiveStyle 插件让 Sublime 与 Chrome 实时联动：你在 Sublime 中改 CSS，浏览器里立即生效，无需刷新，特别适合调试 media query 和 font-size 层级变化。
- Sublime 安装 LiveStyle 插件，Chrome 安装对应扩展
- 打开 H5 页面 → 开启 LiveStyle → 修改 CSS 中的 @media (max-width: 768px) 或 html{font-size: 26.667px}，实时查看效果
- 注意：确保页面已引入动态设置根字体的 JS（如 flexible.js 或 postcss-pxtorem 编译逻辑）
配置 Sublime 自动补全常用响应式类名与媒体查询片段
手动敲 @media screen and (min-width: 375px) 太慢，且易出错。可通过 Sublime 的 Snippet 功能预设高频响应式代码块。
- Tools → Developer → New Snippet，填入：
- <content>@media screen and (min-width: ${1:375}px) { ${2:/* style */} }</content>
- 保存为 media.sublime-snippet，之后输入 media + Tab 就能快速展开
- 同理可建 rem16（font-size: 1rem;）、flex-center 等实用片段
结合 PostCSS 工具链，在保存时自动转换 px → rem
真正可靠的 rem 适配依赖构建阶段处理（如用 postcss-pxtorem）。Sublime 可配置“保存即编译”：借助 SublimeOnSaveBuild 插件，在保存 .css 或 .scss 文件时，自动调用 PostCSS 命令行完成 px 转 rem，并输出到 dist 目录。
- 全局安装：npm install -g postcss-cli postcss-pxtorem
- 新建 .postcssrc 配置转换基准（如 root_value: 37.5，selectorBlackList: [/^html$/]）
- Sublime 中配置 Build System，命令指向 postcss $file -o ./dist/$file_base.css
- 保存源文件，自动获得已转 rem 的兼容版本
基本上就这些。Sublime 不是 IDE，但搭好这几层，写 H5 响应式代码会快而稳——重点不是换算多炫，而是让 px/rem/媒体查询这些重复动作，少动脑、少出错、一气呵成。
