V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
wolf777
V2EX  ›  程序员

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

  •  
  •   wolf777 · 2016-10-15 13:01:54 +08:00 via iPhone · 6503 次点击
    这是一个创建于 2943 天前的主题,其中的信息可能已经有所发展或是发生改变。
    32 条回复    2016-10-17 10:53:46 +08:00
    wolf777
        1
    wolf777  
    OP
       2016-10-15 13:05:42 +08:00 via iPhone
    考虑到手机屏幕尺寸,可以去掉一些栏目。
    yrq110
        2
    yrq110  
       2016-10-15 13:08:09 +08:00
    media queries 响应式布局?
    lhx2008
        3
    lhx2008  
       2016-10-15 13:14:54 +08:00
    bootstrap 响应式布局
    warDoggie
        4
    warDoggie  
       2016-10-15 13:20:14 +08:00 via iPhone
    简单粗暴可以,直接用 Js 判断 UA 大小给大块的 div 添钩子 class ,覆盖 width display 这些属性,新的 css 文件和 Js 和原项目的隔离。麻烦程度取决 PC 的布局方案,要全是 px 写死的,不如重新切图😂
    wolf777
        5
    wolf777  
    OP
       2016-10-15 13:23:39 +08:00 via iPhone
    全部是 px 。。
    kulove
        6
    kulove  
       2016-10-15 13:28:02 +08:00
    响应式或者重新写一套手机的
    warDoggie
        7
    warDoggie  
       2016-10-15 13:28:24 +08:00 via iPhone
    @wolf777 信楼上,上 bootstrap 靠谱 手写 media query 修修补补 你能玩一天咯😂
    DoraJDJ
        8
    DoraJDJ  
       2016-10-15 13:31:28 +08:00 via Android
    响应式,媒体查询
    wenzichel
        9
    wenzichel  
       2016-10-15 13:59:22 +08:00
    媒体查询,根据不同的尺寸展示不一样的样式
    henyi2211
        10
    henyi2211  
       2016-10-15 14:00:28 +08:00
    bootstrap 框架 改造你的网站, 方便快捷, 不用想太多
    moxiaonai
        11
    moxiaonai  
       2016-10-15 14:12:11 +08:00
    最简单 media queries ,复杂点的,布局不能转换成手机布局的,重新布局一套手机的模板,监测浏览器&&屏幕尺寸,根据不同结果加载不同模板
    GreenJoson
        12
    GreenJoson  
       2016-10-15 14:21:59 +08:00
    bootstrap 老外的,看不懂可以用国内的,拼图 css 国产的也不错。
    adv007
        13
    adv007  
       2016-10-15 14:22:41 +08:00 via iPhone
    ua 判断手机访问新搞一套 css 替换掉原来的,注意是替换
    pubby
        14
    pubby  
       2016-10-15 14:24:58 +08:00
    页面简单的用 bootstrap 做成响应式

    pc 页面内容布局本身不适合手机的情况,可以模板文件直接复制一份作为移动版,然后上 bootstrap 修改更快
    (看上去你是后一种情况)
    zgl2007dj
        15
    zgl2007dj  
       2016-10-15 15:21:07 +08:00
    直接做多套移动版的会简单很多
    Technetiumer
        16
    Technetiumer  
       2016-10-15 15:25:19 +08:00
    Bootstrap 或 AmazeUI 什么的
    levon
        17
    levon  
       2016-10-15 15:38:35 +08:00
    开始都没有考虑,做好再来改造比较麻烦
    wolf777
        18
    wolf777  
    OP
       2016-10-15 15:41:40 +08:00 via iPhone
    .......
    Vanry
        19
    Vanry  
       2016-10-15 15:54:36 +08:00
    改造难度大 就另外建个手机站
    qianmeng
        20
    qianmeng  
       2016-10-15 15:55:21 +08:00 via Android
    我用 bootstrap 改过一个,很简单,每天二十分钟,两周弄完
    hyrious
        21
    hyrious  
       2016-10-15 19:15:02 +08:00 via Android
    media query 正解
    某些元素使用 rem
    看看 css-tricks
    test4zhou
        22
    test4zhou  
       2016-10-15 22:17:03 +08:00
    重构响应式
    hebeiround
        23
    hebeiround  
       2016-10-16 01:48:41 +08:00 via iPhone
    已经做好了再去搞自适应干嘛?直接做一套移动版的就可以了。
    Jestom
        24
    Jestom  
       2016-10-16 03:34:20 +08:00 via Android
    马克一下~我也正准备改。。
    meszyouh
        25
    meszyouh  
       2016-10-16 08:12:18 +08:00 via Android
    @hebeiround 我想问这个。。。
    shlabc
        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 层)稍作修改,根据公共入口层传递来的判断结果,进行模块变量替换(可做成公共的)
    dphdjy
        27
    dphdjy  
       2016-10-16 13:25:38 +08:00 via Android
    一般网站建响应式比较快,如果对性能之类有需求,请重写移动端
    cznyx
        28
    cznyx  
       2016-10-16 20:39:04 +08:00
    上 bootstrap 吧
    benpichu
        29
    benpichu  
       2016-10-16 23:29:14 +08:00 via Android
    [
    viewport ,@media ,应该就差不多了
    ]
    lslqtz
        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">
    然后进行兼容性测试
    93html
        31
    93html  
       2016-10-17 10:46:38 +08:00
    1. media query
    2. 响应式框架( bootstrap 等)重构
    3. 单独开发移动版网站,后端根据请求重定向

    速度 1 > 2 > 3
    效果 3 > 2 > 1
    HsuanLee
        32
    HsuanLee  
       2016-10-17 10:53:46 +08:00
    按照我以往的经验,响应式网站先从最小设备适配开始做。及现做移动端然后平板,最后 PC

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

    况且考虑到以后移动端可能会做首屏优化或者合并接口之类的优化工作,在 PC 和移动分离的情况下维护工作也会轻松很多。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3371 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 11:31 · PVG 19:31 · LAX 03:31 · JFK 06:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.