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

2015-04-22 00:33:57 +08:00
 metrue

前段时间去室友去面知名互联网公司的前端,给了一段类似新闻的没有样式的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>
3997 次点击
所在节点    程序员
18 条回复
oott123
2015-04-22 07:10:09 +08:00
我居然看到了 table …
qsun
2015-04-22 07:35:16 +08:00
据说 table 的 responsive style 是世界级难题
banri
2015-04-22 08:11:39 +08:00
http://codepen.io/anon/pen/QwPVNW?editors=110

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

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

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

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

我贴出来主要是想听听大家是什么思路。有demo看看就更好了,你的实现我觉得挺好的。
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
2015-04-22 10:32:20 +08:00
@metrue 嘿嘿

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

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

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

好简洁,而且效果可用。
notcome
2015-04-22 18:25:44 +08:00
表格的 responsive 其实不是一个通用的问题,而是具体到表格本身。比如首列是否显示?要不要把横着的表格转成竖的?如果比较目的不强,是不是可以一页只显示一列,类似那种首屏照片轮播?

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/185357

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX