答案是将响应式设计与帝国CMS标签结合，通过设置viewport元标签、使用媒体查询和弹性布局、适配移动端导航及图片自适应，实现多设备兼容显示效果。
做帝国CMS响应式模板，核心是把前端的自适应网页设计（Responsive Web Design）和帝国CMS的标签系统结合。不需要改后台，重点在HTML结构和CSS控制上实现不同设备下的良好显示效果。
1. 设置基础的响应式结构
要在网页头部加入视口（viewport）元标签，确保移动设备正确缩放：
这是响应式的基础，让页面宽度等于设备屏幕宽度，并禁止初始缩放。
2. 使用弹性布局和媒体查询
用CSS3的媒体查询（Media Queries）针对不同屏幕尺寸设置样式。例如：
@media (max-width: 768px) {.header { font-size: 18px; }
.nav { display: none; }
.mobile-nav { display: block; }
}
@media (min-width: 769px) {
.container { width: 1200px; }
}
常见断点参考：
- 手机：最大 768px
- 平板：768px - 1024px
- 桌面：1025px 及以上
3. 帝国CMS标签适配移动端
帝国模板本身使用[!--pagetitle--]、[!--class.menu--]等标签，这些不需修改，只需包裹在响应式结构中。比如导航菜单：
[!--class.menu--]
通过CSS控制桌面端只显示.nav，移动端隐藏.nav并显示.mobile-nav，再用JS绑定按钮切换。
4. 图片自适应处理
避免图片撑破容器，统一加样式：
img {max-width: 100%;
height: auto;
display: block;
}
如果使用帝国CMS的缩略图功能，建议上传足够大的图，由前端自动压缩显示，保证高清屏效果。
基本上就这些。只要前端写好响应式框架，帝国CMS模板套用起来很顺。关键是结构清晰、CSS断点合理、图片可控。不需要动程序文件，纯模板层面就能完成。
