• 请不要在回答技术问题时复制粘贴 AI 生成的内容
wolf777
V2EX  ›  程序员

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

  •  
  •   wolf777 · Oct 15, 2016 via iPhone · 7947 views
    This topic created in 3672 days ago, the information mentioned may be changed or developed.
    32 replies  •  2016-10-17 10:53:46 +08:00
    wolf777
    wolf777
    OP
    Oct 15, 2016 via iPhone
    1
    考虑到手机屏幕尺寸,可以去掉一些栏目。
    yrq110
    yrq110
    Oct 15, 2016
    2
    media queries 响应式布局?
    lhx2008
    lhx2008
    Oct 15, 2016
    3
    bootstrap 响应式布局
    warDoggie
    warDoggie
    Oct 15, 2016 via iPhone
    4
    简单粗暴可以,直接用 Js 判断 UA 大小给大块的 div 添钩子 class ,覆盖 width display 这些属性,新的 css 文件和 Js 和原项目的隔离。麻烦程度取决 PC 的布局方案,要全是 px 写死的,不如重新切图😂
    wolf777
    wolf777
    OP
    Oct 15, 2016 via iPhone
    5
    全部是 px 。。
    kulove
    kulove
    Oct 15, 2016
    6
    响应式或者重新写一套手机的
    warDoggie
    warDoggie
    Oct 15, 2016 via iPhone
    7
    @wolf777 信楼上,上 bootstrap 靠谱 手写 media query 修修补补 你能玩一天咯😂
    DoraJDJ
    DoraJDJ
    Oct 15, 2016 via Android
    8
    响应式,媒体查询
    wenzichel
    wenzichel
    Oct 15, 2016
    9
    媒体查询,根据不同的尺寸展示不一样的样式
    herbertzz
    herbertzz
    Oct 15, 2016
    10
    bootstrap 框架 改造你的网站, 方便快捷, 不用想太多
    moxiaonai
    moxiaonai
    Oct 15, 2016
    11
    最简单 media queries ,复杂点的,布局不能转换成手机布局的,重新布局一套手机的模板,监测浏览器&&屏幕尺寸,根据不同结果加载不同模板
    GreenJoson
    GreenJoson
    Oct 15, 2016
    12
    bootstrap 老外的,看不懂可以用国内的,拼图 css 国产的也不错。
    adv007
    adv007
    Oct 15, 2016 via iPhone
    13
    ua 判断手机访问新搞一套 css 替换掉原来的,注意是替换
    pubby
    pubby
    Oct 15, 2016
    14
    页面简单的用 bootstrap 做成响应式

    pc 页面内容布局本身不适合手机的情况,可以模板文件直接复制一份作为移动版,然后上 bootstrap 修改更快
    (看上去你是后一种情况)
    zgl2007dj
    zgl2007dj
    Oct 15, 2016
    15
    直接做多套移动版的会简单很多
    Technetiumer
    Technetiumer
    Oct 15, 2016
    16
    Bootstrap 或 AmazeUI 什么的
    levon
    levon
    Oct 15, 2016
    17
    开始都没有考虑,做好再来改造比较麻烦
    wolf777
    wolf777
    OP
    Oct 15, 2016 via iPhone
    18
    .......
    Vanry
    Vanry
    Oct 15, 2016
    19
    改造难度大 就另外建个手机站
    qianmeng
    qianmeng
    Oct 15, 2016 via Android
    20
    我用 bootstrap 改过一个,很简单,每天二十分钟,两周弄完
    hyrious
    hyrious
    Oct 15, 2016 via Android
    21
    media query 正解
    某些元素使用 rem
    看看 css-tricks
    test4zhou
    test4zhou
    Oct 15, 2016
    22
    重构响应式
    hebeiround
    hebeiround
    Oct 16, 2016 via iPhone
    23
    已经做好了再去搞自适应干嘛?直接做一套移动版的就可以了。
    YV4usGtvaOIAeXIa
    YV4usGtvaOIAeXIa
    Oct 16, 2016 via Android
    24
    马克一下~我也正准备改。。
    meszyouh
    meszyouh
    Oct 16, 2016 via Android
    25
    @hebeiround 我想问这个。。。
    shlabc
    shlabc
    Oct 16, 2016
    26
    1 、在系统的公共入口层判断是否移动设备
    2 、现有的 M 层不变
    3 、 PC 版的 V 层不变,假设模版名为 index.html
    4 、用 bootstrap3 快速开发一套移动 V 层,模版命名为 index_app.html (模版后缀为“_app ”),或者新设置一个 app 模版目录
    5 、 C 层(或 P 层)稍作修改,根据公共入口层传递来的判断结果,进行模块变量替换(可做成公共的)
    dphdjy
    dphdjy
    Oct 16, 2016 via Android
    27
    一般网站建响应式比较快,如果对性能之类有需求,请重写移动端
    cznyx
    cznyx
    Oct 16, 2016
    28
    上 bootstrap 吧
    benpichu
    benpichu
    Oct 16, 2016 via Android
    29
    [
    viewport ,@media ,应该就差不多了
    ]
    lslqtz
    lslqtz
    Oct 17, 2016
    30
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    然后进行兼容性测试
    93html
    93html
    Oct 17, 2016
    31
    1. media query
    2. 响应式框架( bootstrap 等)重构
    3. 单独开发移动版网站,后端根据请求重定向

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

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

    况且考虑到以后移动端可能会做首屏优化或者合并接口之类的优化工作,在 PC 和移动分离的情况下维护工作也会轻松很多。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1520 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 106ms · UTC 23:24 · PVG 07:24 · LAX 15:24 · JFK 18:24
    ♥ Do have faith in what you're doing.