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

改造

平板

适应

分辨率

32 条回复 • 2016-10-17 10:53:46 +08:00

1

wolf777

OP

2016-10-15 13:05:42 +08:00 via iPhone

考虑到手机屏幕尺寸，可以去掉一些栏目。

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

2016-10-15 13:23:39 +08:00 via iPhone

全部是 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

2016-10-15 15:41:40 +08:00 via iPhone

.......

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

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 和移动分离的情况下维护工作也会轻松很多。