一个已经完成的 PC 网站，如何快速改造，让它能适应平板、手机等不同分辨率？

[wolf777]

[hyrious]

media query 正解
某些元素使用 rem
看看 css-tricks

[test4zhou]

重构响应式

[hebeiround]

已经做好了再去搞自适应干嘛？直接做一套移动版的就可以了。

[Jestom]

马克一下～我也正准备改。。

[meszyouh]

@hebeiround 我想问这个。。。

[shlabc]

1 、在系统的公共入口层判断是否移动设备
2 、现有的 M 层不变
3 、 PC 版的 V 层不变，假设模版名为 index.html
4 、用 bootstrap3 快速开发一套移动 V 层，模版命名为 index_app.html （模版后缀为“_app ”），或者新设置一个 app 模版目录
5 、 C 层（或 P 层）稍作修改，根据公共入口层传递来的判断结果，进行模块变量替换（可做成公共的）

[dphdjy]

一般网站建响应式比较快，如果对性能之类有需求，请重写移动端

[cznyx]

上 bootstrap 吧

[benpichu]

[
viewport ，@media ，应该就差不多了
]

[lslqtz]

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
然后进行兼容性测试

[93html]

1. media query
2. 响应式框架（ bootstrap 等）重构
3. 单独开发移动版网站，后端根据请求重定向

速度 1 > 2 > 3
效果 3 > 2 > 1

[HsuanLee]

按照我以往的经验，响应式网站先从最小设备适配开始做。及现做移动端然后平板，最后 PC

题主这样的情况，我们假设原有的 PC 版在数据分离工作做得不错的话。直接重写移动端的效率会更高。其实很多站都这样的 比如（ m.taobao.com; m.jd.com; m.zhihu.com; ）

况且考虑到以后移动端可能会做首屏优化或者合并接口之类的优化工作，在 PC 和移动分离的情况下维护工作也会轻松很多。