如何根据分辨率不同，判断是否显示指定内容

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 4011 天前的主题，其中的信息可能已经有所发展或是发生改变。

今天看到一个wp主题。。。会根据屏幕大小进行变化(演示地址http://www.cmhello.com/)，当为1024*768时，他的3列变2列了。如图
较大分辨率时

1024*768时

请问这种是怎么实现的？用js,还是php判断?

另外我也想弄出这种自动适应的主题，哪里有这种布局教程呢？

分辨率

主题

14 条回复 • 1970-01-01 08:00:00 +08:00

shpasspass

2013-11-30 19:32:34 +08:00

忘了写了，这个网站 http://www.guomii.com/ 也是，不同分辨率，看到的东西不一样的

cutehalo

2013-11-30 19:33:46 +08:00 via iPad

用css的media query

rwx

2013-11-30 19:35:57 +08:00 via Android

不是bootstrap么？

jun1st

2013-11-30 20:15:00 +08:00

@rwx bootstrap 也是用的media query！

alexrezit

2013-11-30 21:01:00 +08:00

http://learnlayout.com

shpasspass

2013-11-30 22:45:24 +08:00

多谢了，我去仔细研究研究

justinwuj

2013-11-30 22:56:38 +08:00 via Android

Media query 可以满足了

paloalto

2013-11-30 23:33:34 +08:00

阮一峰《自适应网页设计（Responsive Web Design）》

http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

alay9999

2013-12-01 01:02:47 +08:00

响应式

sdjl

2013-12-01 09:27:44 +08:00

http://zarkfx.com/auto_gen/widthshow.html

shpasspass

2013-12-01 21:44:22 +08:00

@cutehalo
@rwx
@jun1st
@alexrezit
@sdjl
刚才突然想到一个问题，iphone5s虽然是小屏幕，但是他的分辨率达到了1136x640，那么用Media query 判断最大宽度的方法应该就不适用了吧。。。那么还有其他什么办法吗？

alexrezit

2013-12-01 21:51:08 +08:00

@shpasspass
width 还是 320 而不是 640, 只是 pixel density 会变了, 而这个 media query 也是可识别的 ([-webkit-]min-device-pixel-ratio). 这些东西看起来复杂, 其实查查文档就都知道了, 可以学一下当作小常识记住, 我根本不做前端都知道. -__-

alexrezit

2013-12-01 21:51:54 +08:00

@alexrezit
噢对了以上可以延伸到所有 retina 显示设备.

shpasspass

2013-12-01 23:13:06 +08:00

@alexrezit 谢了，我再去查查