Atom本身不提供响应式测试能力，需通过atom-live-server启动本地HTTP服务（http://localhost:3000），再在Chrome DevTools中启用Device Toolbar（Ctrl+Shift+M）进行调试；atom-html-preview因走file://协议，不支持媒体查询、@import和fetch，无法用于响应式测试。
Atom 本身不提供响应式测试能力，得靠浏览器 DevTools + 正确预览方式
Atom 是纯文本编辑器，没有内置设备模拟器或 viewport 切换面板。所谓“响应式测试”，实际是：用 Atom 编辑 HTML/CSS → 启动一个能被浏览器访问的本地服务 → 在 Chrome/Firefox 的 DevTools 里调出 Device Toolbar（Ctrl+Shift+M 或 Cmd+Shift+M）→ 拖动尺寸或选预设设备。关键不在 Atom，而在你用什么方式把文件喂给浏览器。
必须用 atom-live-server，不能用 atom-html-preview
atom-html-preview 只做静态渲染，走的是 file:// 协议，不支持媒体查询生效、@import 加载、fetch 请求，DevTools 的响应式调试面板也基本失效——它连 window.innerWidth 都骗不过。
- 装插件：
apm install atom-live-server，装完必须重启 Atom - 打开你的
index.html，按Ctrl+Alt+L（Win/Linux）或Cmd+Alt+L（macOS） - 浏览器自动打开
http://localhost:3000/index.html—— 注意是http://，不是file:// - 此时才能在 Chrome DevTools 中按
Ctrl+Shift+M进入响应式模式，拖动边界、切 iPhone/Pad 模式才真正起作用
改了 CSS 却没触发刷新？检查监听路径和引用方式
atom-live-server 只监听“启动时那个 HTML 文件”所在目录及其子目录下的变更。如果你的 index.html 在 /project/src/，但 style.css 放在 /project/assets/，改了 CSS 不会刷新页面。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 确保所有资源（
.html、.css、.js）都在同一级或子目录下，比如都放在/project/根目录 - HTML 中引用 CSS 必须用
<link rel="stylesheet" href="css/style.css">这类相对路径，不能用@import "assets/style.css"——@import不在监听范围内 - 检查浏览器控制台是否有
404，比如GET http://localhost:3000/assets/style.css 404，说明路径错，得调整href或移动文件位置
移动端真机调试要加 host 配置
想用手机浏览器访问 Atom 启的服务做实机响应式测试？默认 localhost 只能本机访问。需要手动改 atom-live-server 设置：
立即学习“前端免费学习笔记（深入）”；
- Atom 设置 → Packages →
atom-live-server→ Settings - 勾选
Enable host option - 填
0.0.0.0（不是127.0.0.1） - 保存后重启服务，再查本机局域网 IP（如
192.168.1.12），手机浏览器访问http://192.168.1.12:3000/index.html
注意：手机和电脑必须在同一 Wi-Fi 下；防火墙可能拦截，Windows 用户需确认“专用网络”已启用。
