V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
forvtwoex
V2EX  ›  问与答

现在前端能完美自适应桌面、平板和手机吗?

  •  
  •   forvtwoex · 2017-03-01 08:34:20 +08:00 · 3025 次点击
    这是一个创建于 2823 天前的主题,其中的信息可能已经有所发展或是发生改变。

    现在用的许多系统,桌面和移动端是用不同的模板的,判断是 PC 还是手机自动跳转,感觉要维护两套模板有点麻烦。

    能不能一套自动搞定,不同设备的浏览器访问时自动调整好,弄成这样子会不会比做两套东西成本更高呢?

    23 条回复    2017-03-01 18:58:30 +08:00
    1OF7G
        1
    1OF7G  
       2017-03-01 08:45:36 +08:00 via iPhone   ❤️ 1
    你说的 v2 网站就是,不过我记得 v2 是根据 UA 加载不同的 CSS ,还有一种用的最多的方法是响应式布局
    xyjtou
        2
    xyjtou  
       2017-03-01 09:10:13 +08:00 via Android   ❤️ 1
    1 、如果 PC 版,移动站是界面布局差异很大的,那还是根据 UA 判断,分别维护两套模板。
    2 、如果界面简单,响应式就可以啦。
    learnshare
        3
    learnshare  
       2017-03-01 09:41:13 +08:00   ❤️ 1
    简单的展示型页面可以做成响应式的,也就是只有一个页面,根据设备特征调整布局
    但复杂的系统往往不合适 https://www.zhihu.com/question/38065402/answer/74740390
    Sapp
        4
    Sapp  
       2017-03-01 09:46:23 +08:00 via iPhone   ❤️ 1
    响应式,如果简单的布局还可以,一旦复杂,还不如走两套不同的。
    Sivan
        5
    Sivan  
       2017-03-01 09:55:09 +08:00
    可以做到,但是不建议。
    loading
        6
    loading  
       2017-03-01 09:56:44 +08:00 via Android   ❤️ 1
    可以是可以,但工作量其实是增加了。
    还不如做两套。

    这样加载也更快。服务器流量也省了。
    Ncanback
        7
    Ncanback  
       2017-03-01 10:01:25 +08:00   ❤️ 1
    做是可以做 简单页面布局响应式布局啊 但是页面内容布局一旦多了起来 细分下去工作量太多 这些工作量大于直接开发俩套所用的时间 多出来的时间还可以继续优化页面结构
    就是后期维护麻烦点 但总比修改完 pc 后移动出页面 bug 好
    xxfan
        8
    xxfan  
       2017-03-01 10:08:29 +08:00   ❤️ 1
    引个 bootstrap,很容易做到..但是同样感觉稍微复杂点的网站还是做两套好..
    比如用 bs 做的 https://www.pantrysbest.com/cities/hangzhou..就是一套代码利用 bs 做响应式的.
    murmur
        9
    murmur  
       2017-03-01 10:16:17 +08:00   ❤️ 1
    平板一般是没人管的 要么是 PC 端 要么是做 tv 版顺便给他来个 max 版 当然大厂肯定是要覆盖的 但是就算覆盖也是万年不更新的节奏

    手机端更新最频繁

    PC 端大厂做的早 基本都有 小厂来不基做
    murmur
        10
    murmur  
       2017-03-01 10:17:16 +08:00   ❤️ 1
    响应式布局(包括多语言支持)都是看上去很美用起来吃鳖的东西

    实际上都是做好几套模板

    尤其是多语言这个,碰到某些特殊国家内容都要改
    ho121
        11
    ho121  
       2017-03-01 10:19:33 +08:00   ❤️ 1
    http://www.zdnet.com/

    这个网站似乎是这样
    yjxjn
        12
    yjxjn  
       2017-03-01 10:20:29 +08:00   ❤️ 1
    Biwood
        13
    Biwood  
       2017-03-01 10:24:53 +08:00   ❤️ 1
    https://www.apple.com

    苹果的官网就是响应式的,用一套样式适应不同屏幕宽度
    murmur
        14
    murmur  
       2017-03-01 10:25:41 +08:00   ❤️ 1
    @Biwood 苹果的布局特殊啊 基本上就是一堆幻灯叠在一起。。
    wbt
        15
    wbt  
       2017-03-01 10:32:20 +08:00
    响应式布局。
    wovfeng
        16
    wovfeng  
       2017-03-01 12:43:03 +08:00
    给你看个我们的维护的网站 微软官方商城: https://www.microsoftstore.com.cn/
    总体来说对前端要求比较高。很多地方会有坑。但是对于后端来说只需要部署一套即可。

    工作量的话,其实大部分页面是 1.2 的样子。有些复杂的页面会多一些,但是不会到 2 。

    但是其实不大推荐使用响应式,主要是因为觉得其实移动端和 pc 端的交互不应该保持一致。
    yjxjn
        17
    yjxjn  
       2017-03-01 13:11:44 +08:00
    @wovfeng 微软官方商城居然是外包的???
    wovfeng
        18
    wovfeng  
       2017-03-01 13:28:16 +08:00 via iPhone
    @yjxjn 我们只是负责前端解决方案
    ibufu
        19
    ibufu  
       2017-03-01 14:35:00 +08:00
    @wovfeng 能稍微讲一下哪里有坑吗,粗粗地看了一下,感觉还好
    wovfeng
        20
    wovfeng  
       2017-03-01 15:14:24 +08:00
    @ibufu 那是因为我们已经做了差不多 2 年了,总结了不少经验。当然还有一些问题还在研究。比如文字在不同分辨率下的效果,又要保证可读性。
    wovfeng
        21
    wovfeng  
       2017-03-01 15:16:34 +08:00
    @ibufu 还有就是,目前的前端可能是全部使用 px 的。如果一开始全部不用 px ,对于前端来说还是一个不小的挑战的。
    要考虑的是 不仅要把所有的东西在不同分辨率下排版不出问题,又要保持一定的视觉比例。
    ibufu
        22
    ibufu  
       2017-03-01 18:07:04 +08:00 via iPhone
    @wovfeng 你说的更像是设计师该研究的东西:D
    wovfeng
        23
    wovfeng  
       2017-03-01 18:58:30 +08:00
    @ibufu 我们的设计师 目前只给了三个尺寸的样式,比如 1600 , 1350 , 640 。所以只能前端去把控的。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5334 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 07:00 · PVG 15:00 · LAX 23:00 · JFK 02:00
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.