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

面试之写代码: 你能够将一段没有样式的 html,以最简单的方式使之 responsive 么?

  •  
  •   metrue ·
    metrue · 2015-04-22 00:33:57 +08:00 · 3993 次点击
    这是一个创建于 3502 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前段时间去室友去面知名互联网公司的前端,给了一段类似新闻的没有样式的html的,让他现场实现移动端自适应,可以使用搜索引擎。挺有难度对我这个前端渣来说。

    <div class="content_main left"><!-- adArea --><span>
    </span><span>
    </span><!-- adArea end--><span>
    </span><span>
    </span><span>
    </span><!--NewsContent--><span>
    </span><!--enpproperty <date>2015-04-17 22:33:48.0</date><author>周欣</author><title>中武终极格斗世界职业搏击联盟赛即将来袭</title><keyword>巴特尔,泰国,拳王,搏击,散打</keyword><subtitle></subtitle><introtitle></introtitle><siteid>1</siteid><nodeid>58196</nodeid><nodename>体育滚动</nodename><nodesearchname>null</nodesearchname>/enpproperty--><!--enpcontent--><span>
    </span><div class="content" id="text_content"><span>
    </span><table border="0" cellpadding="0" cellspacing="0" width="655">
    <tbody><tr>
    <td align="center"></td></tr>
    <tr>
    <td background="http://images.china.cn/images1/ch/07news/b_13.gif" height="1"></td>
    </tr>
    <tr>
    <td align="center">发布时间: 2015-04-17 22:09:25&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;作者: 周欣&nbsp;&nbsp;|&nbsp;&nbsp;</td>
    </tr>
    <tr>
    <td align="left">
    <p>  新华网北京4月17日体育专电(记者周欣)中武终极格斗·CKF世界职业搏击联盟赛将于18日晚在北京国家奥林匹克中心体育馆打响,中国散打冠军白近斌、巴特尔、青格勒等人将与比利时、泰国等外国拳王进行比拼。</p>
    <p>  中国选手派出了全运会冠军巴特尔、世界杯散打冠军白近斌、CKF冠军青格勒、UFC战将王安莹、省运会冠军孙欣欣、全国冠军满建刚、中国MMA第一人张铁泉大弟子贺楠楠。外国拳王包括俄罗斯世界散打冠军穆斯里穆、比利时魔王马特瓦,泰国泰拳王>
    阿密,UFC名将威廉、泰国第一美女泰拳王、WMC金腰带拥有者娜牡丹。</p>
    <p>  在对阵表上,白近斌的对手阿尔卡·马特瓦是荷兰目前一线的三栖战士,绰号“斯巴达人”,在没有升级前参加过70公斤级的“荣耀”之战,在荷兰除了自由搏击和泰拳外,他还打MMA规则的赛事,实力一流绝对不容小觑。白近斌在进入职业赛场后,战绩3战2
    负,对他来说,刚进入职业赛场还需要积累自由搏击技术和比赛经验。</p>
    <p>  巴特尔的对手是泰国WMC金腰带拳王阿密。巴特尔于今年3月15日在广州击败了泰国名将潇杀狂,阿密也曾经战胜过潇杀狂。所以巴特尔和阿密的对抗更令人期待。</p>
    <p>  青格勒将与俄罗斯拳王穆斯里穆过招,贺楠楠将和美国选手较量。</p>
    <p>  本次赛事由中国武术协会主办,隆基搏击俱乐部、中武搏击俱乐部承办,赛事出品方为今日乾通(北京)投资有限公司和美国纽约财富公司。</p>
    </td>
    </tr>
    </tbody></table><span>
    </span></div><span>
    
    第 1 条附言  ·  2015-04-22 13:36:01 +08:00
    其实我也不知道面试官想听什么答案,拿出来只是让大家可以头脑风暴一下,想看看有没有让大家眼前一亮的方案。
    18 条回复    2015-04-22 18:25:44 +08:00
    oott123
        1
    oott123  
       2015-04-22 07:10:09 +08:00 via Android
    我居然看到了 table …
    qsun
        2
    qsun  
       2015-04-22 07:35:16 +08:00
    据说 table 的 responsive style 是世界级难题
    banri
        3
    banri  
       2015-04-22 08:11:39 +08:00   ❤️ 3
    http://codepen.io/anon/pen/QwPVNW?editors=110

    转载,来源不明
    就在收藏夹里翻到了……
    banri
        4
    banri  
       2015-04-22 09:07:49 +08:00
    http://banri.me/demo/tabledemo.html

    我蛋疼的去试了下…
    那啥……题目有问题啊,缺个 /div 标签 多个 span 标签。

    主要是不知道你要啥效果 反正随便先试试……媒体查询那边其实不应该是655px

    Windows下滚动条一般是18px,所以655+20左右的值是比较好的
    gongpeione
        5
    gongpeione  
       2015-04-22 09:45:38 +08:00
    @banri 不愧是豆狸触!
    metrue
        6
    metrue  
    OP
       2015-04-22 09:49:20 +08:00
    @banri

    我贴出来主要是想听听大家是什么思路。有demo看看就更好了,你的实现我觉得挺好的。
    liyer
        7
    liyer  
       2015-04-22 09:56:49 +08:00
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
    #text_content table{
    width:98%;
    max-width:655px;
    }
    </style>

    这样?
    banri
        8
    banri  
       2015-04-22 10:32:20 +08:00
    @metrue 嘿嘿

    思路的话我感觉自己还是有问题。。。
    版式方面还是设计师来想会好很多,排版方面其实就是用什么max-width、百分比、以及双栏、三栏自适应之类的吧,如果有菜单还可以考虑配合JS进行切换、隐藏、fixed定位等
    banri
        9
    banri  
       2015-04-22 10:33:00 +08:00
    @gongpeione 树大触 么么哒
    kokdemo
        10
    kokdemo  
       2015-04-22 10:42:42 +08:00
    能不能用js重写一下dom啊……
    66beta
        11
    66beta  
       2015-04-22 11:11:26 +08:00
    给一个chrome,不需要搜索引擎了
    richardevs
        12
    richardevs  
       2015-04-22 11:22:18 +08:00
    @banri 正想發給你看居然就看到了豆腐菊苣!
    jarlyyn
        13
    jarlyyn  
       2015-04-22 12:58:29 +08:00
    只要用了mediaquery就是responsive了吧?
    效果好不好怎么样的效果是另一回事了……
    FrankFang128
        14
    FrankFang128  
       2015-04-22 13:02:31 +08:00   ❤️ 1
    table,img{width: 100%}
    嗯,差不多完成了。
    metrue
        15
    metrue  
    OP
       2015-04-22 13:33:02 +08:00
    @kokdemo

    其实我也想过直接用 JS 重新dom,但是没有想好怎么通用的实现。也就说怎么针对任何的html输入都能work。
    metrue
        16
    metrue  
    OP
       2015-04-22 13:34:50 +08:00
    @liyer

    这是常规的可用的方案,其实我也不知道面试官想听什么答案。
    metrue
        17
    metrue  
    OP
       2015-04-22 13:41:25 +08:00
    @FrankFang128

    好简洁,而且效果可用。
    notcome
        18
    notcome  
       2015-04-22 18:25:44 +08:00 via iPhone
    表格的 responsive 其实不是一个通用的问题,而是具体到表格本身。比如首列是否显示?要不要把横着的表格转成竖的?如果比较目的不强,是不是可以一页只显示一列,类似那种首屏照片轮播?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4999 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 09:37 · PVG 17:37 · LAX 01:37 · JFK 04:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.