一个已经完成的 PC 网站，如何快速改造，让它能适应平板、手机等不同分辨率？
wolf777 2016-10-15 13:01:54 +08:00 via iPhone 6976 次点击这是一个创建于 3285 天前的主题，其中的信息可能已经有所发展或是发生改变。
 | 1 wolf777 OP 考虑到手机屏幕尺寸，可以去掉一些栏目。 |
 | 2 yrq110 2016-10-15 13:08:09 +08:00 media queries 响应式布局？ |
 | 3 lhx2008 2016-10-15 13:14:54 +08:00 bootstrap 响应式布局 |
 | 4 warDoggie 2016-10-15 13:20:14 +08:00 via iPhone 简单粗暴可以，直接用 Js 判断 UA 大小给大块的 div 添钩子 class ，覆盖 width display 这些属性，新的 css 文件和 Js 和原项目的隔离。麻烦程度取决 PC 的布局方案，要全是 px 写死的，不如重新切图 |
| 5 wolf777 OP 全部是 px 。。 |
 | 6 kulove 2016-10-15 13:28:02 +08:00 响应式或者重新写一套手机的 |
| 7 warDoggie 2016-10-15 13:28:24 +08:00 via iPhone @wolf777 信楼上，上 bootstrap 靠谱 手写 media query 修修补补 你能玩一天咯 |
 | 8 DoraJDJ 2016-10-15 13:31:28 +08:00 via Android 响应式，媒体查询 |
 | 9 wenzichel 2016-10-15 13:59:22 +08:00 媒体查询，根据不同的尺寸展示不一样的样式 |
 | 10 herbertzz 2016-10-15 14:00:28 +08:00 bootstrap 框架 改造你的网站, 方便快捷, 不用想太多 |
 | 11 moxiaonai 2016-10-15 14:12:11 +08:00 最简单 media queries ，复杂点的，布局不能转换成手机布局的，重新布局一套手机的模板，监测浏览器&&屏幕尺寸，根据不同结果加载不同模板 |
 | 12 GreenJoson 2016-10-15 14:21:59 +08:00 bootstrap 老外的，看不懂可以用国内的，拼图 css 国产的也不错。 |
 | 13 adv007 2016-10-15 14:22:41 +08:00 via iPhone ua 判断手机访问新搞一套 css 替换掉原来的，注意是替换 |
 | 14 pubby 2016-10-15 14:24:58 +08:00 页面简单的用 bootstrap 做成响应式 pc 页面内容布局本身不适合手机的情况，可以模板文件直接复制一份作为移动版，然后上 bootstrap 修改更快 （看上去你是后一种情况） |
 | 15 zgl2007dj 2016-10-15 15:21:07 +08:00 直接做多套移动版的会简单很多 |
 | 16 Technetiumer 2016-10-15 15:25:19 +08:00 Bootstrap 或 AmazeUI 什么的 |
 | 17 levon 2016-10-15 15:38:35 +08:00 开始都没有考虑，做好再来改造比较麻烦 |
| 18 wolf777 OP ....... |
 | 19 Vanry 2016-10-15 15:54:36 +08:00 改造难度大 就另外建个手机站 |
 | 20 qianmeng 2016-10-15 15:55:21 +08:00 via Android 我用 bootstrap 改过一个，很简单，每天二十分钟，两周弄完 |
 | 21 hyrious 2016-10-15 19:15:02 +08:00 via Android media query 正解 某些元素使用 rem 看看 css-tricks |
 | 22 test4zhou 2016-10-15 22:17:03 +08:00 重构响应式 |
 | 23 hebeiround 2016-10-16 01:48:41 +08:00 via iPhone 已经做好了再去搞自适应干嘛？直接做一套移动版的就可以了。 |
 | 24 YV4usGtvaOIAeXIa 2016-10-16 03:34:20 +08:00 via Android 马克一下～我也正准备改。。 |
 | 25 meszyouh 2016-10-16 08:12:18 +08:00 via Android @hebeiround 我想问这个。。。 |
 | 26 shlabc 2016-10-16 10:01:53 +08:00 1 、在系统的公共入口层判断是否移动设备 2 、现有的 M 层不变 3 、 PC 版的 V 层不变，假设模版名为 index.html 4 、用 bootstrap3 快速开发一套移动 V 层，模版命名为 index_app.html （模版后缀为“_app ”），或者新设置一个 app 模版目录 5 、 C 层（或 P 层）稍作修改，根据公共入口层传递来的判断结果，进行模块变量替换（可做成公共的） |
 | 27 dphdjy 2016-10-16 13:25:38 +08:00 via Android 一般网站建响应式比较快，如果对性能之类有需求，请重写移动端 |
 | 28 cznyx 2016-10-16 20:39:04 +08:00 上 bootstrap 吧 |
 | 29 benpichu 2016-10-16 23:29:14 +08:00 via Android [ viewport ，@media ，应该就差不多了 ] |
 | 30 lslqtz 2016-10-17 08:52:43 +08:00 <meta cOntent="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"> 然后进行兼容性测试 |
 | 31 93html 2016-10-17 10:46:38 +08:00 1. media query 2. 响应式框架（ bootstrap 等）重构 3. 单独开发移动版网站，后端根据请求重定向 速度 1 > 2 > 3 效果 3 > 2 > 1 |
 | 32 HsuanLee 2016-10-17 10:53:46 +08:00 按照我以往的经验，响应式网站先从最小设备适配开始做。及现做移动端然后平板，最后 PC 题主这样的情况，我们假设原有的 PC 版在数据分离工作做得不错的话。直接重写移动端的效率会更高。其实很多站都这样的 比如（ m.taobao.com; m.jd.com; m.zhihu.com; ） 况且考虑到以后移动端可能会做首屏优化或者合并接口之类的优化工作，在 PC 和移动分离的情况下维护工作也会轻松很多。 |
Select Language