V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
andybest
V2EX  ›  前端开发

如何优雅的实现移动端 WEB 页面与 PC 端 WEB 页面?

  •  
  •   andybest · 2015-02-22 04:10:13 +08:00 · 4727 次点击
    这是一个创建于 3573 天前的主题,其中的信息可能已经有所发展或是发生改变。
    目前有几个方案:
    1、使用 Bootstrap 之类的 CSS 框架,自动化实现 “响应式” 前端
    问题:这样前端页面代码是一样的,在定义一些细节会不会有局限性?

    2、为移动端与 PC 端各自单独写一个前端页面。
    问题:维护难度大,比如网站有三个主要页面:首页、列表页、内容页,就要各自写三份。。头大。

    3、套用模板系统,为移动端与 PC 端各自单独写一个前端页面模板
    问题:如上,维护难度略小于方法2

    ...

    v2ex 的 PC 端与移动端代码是不同的,是用什么方式实现的? @Livid

    各位有什么实现不同终端不同页面的优雅的方法?
    6 条回复    2015-05-20 17:33:24 +08:00
    emric
        1
    emric  
       2015-02-22 05:52:58 +08:00   ❤️ 1
    V2 似乎是检测 UA. 如果单从响应式来说, 其实 Bootstrap 也没有想象中那么好用.
    如果不想维护两份, 可以先用原型设计工具规划一份草图, 写页面的时候注意一下结构, CSS 尽量少写固定单位的值, 把页面宽度设成百分比后稍微调整基本就没有问题了.
    tension
        2
    tension  
       2015-02-22 09:46:58 +08:00   ❤️ 1
    其实吧,写几套CSS 即可了
    tonyluj
        3
    tonyluj  
       2015-02-22 09:57:01 +08:00   ❤️ 1
    css 里面用 @media 分成两个分辨率,分别处理。
    维护两套 HTML + CSS 还好吧,JS 尽量做到复用吧。
    yangzh
        4
    yangzh  
       2015-02-22 10:32:34 +08:00 via iPhone   ❤️ 1
    bootstrap 为基础再改造比较容易
    jedrek
        5
    jedrek  
       2015-02-22 17:24:24 +08:00   ❤️ 1
    easton
        6
    easton  
       2015-05-20 17:33:24 +08:00
    个人觉得,要统一显示层界面的话,选择react构建显示层是不错的选择。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1072 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 19:16 · PVG 03:16 · LAX 11:16 · JFK 14:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.