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

V2EX = way to explore

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

For Existing Member Sign In

This topic created in 4536 days ago, the information mentioned may be changed or developed.

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

1024*768时

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

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

分辨率

主题

14 replies • 1970-01-01 08:00:00 +08:00

shpasspass

Nov 30, 2013

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

cutehalo

Nov 30, 2013 via iPad

用css的media query

rwx

Nov 30, 2013 via Android

不是bootstrap么？

jun1st

Nov 30, 2013

@rwx bootstrap 也是用的media query！

alexrezit

Nov 30, 2013

http://learnlayout.com

shpasspass

Nov 30, 2013

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

justinwuj

Nov 30, 2013 via Android

Media query 可以满足了

paloalto

Nov 30, 2013

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

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

alay9999

Dec 1, 2013

响应式

sdjl

Dec 1, 2013

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

shpasspass

Dec 1, 2013

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

alexrezit

Dec 1, 2013

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

alexrezit

Dec 1, 2013

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

shpasspass

Dec 1, 2013

@alexrezit 谢了，我再去查查