shpasspass
V2EX  ›  问与答

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

  •  
  •   shpasspass · Nov 30, 2013 · 3732 views
    This topic created in 4729 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
    shpasspass
    OP
    Nov 30, 2013
    1
    忘了写了,这个网站 http://www.guomii.com/ 也是,不同分辨率,看到的东西不一样的
    cutehalo
    cutehalo
    Nov 30, 2013 via iPad❤️2
    2
    用css的media query
    rwx
    rwx
    Nov 30, 2013 via Android❤️1
    3
    不是bootstrap么?
    jun1st
    jun1st
    Nov 30, 2013❤️1
    4
    @rwx bootstrap 也是用的media query!
    shpasspass
    shpasspass
    OP
    Nov 30, 2013
    6
    多谢了,我去仔细研究研究
    justinwuj
    justinwuj
    Nov 30, 2013 via Android
    7
    Media query 可以满足了
    paloalto
    paloalto
    Nov 30, 2013
    8
    阮一峰 《自适应网页设计(Responsive Web Design)》

    http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
    alay9999
    alay9999
    Dec 1, 2013
    9
    响应式
    shpasspass
    shpasspass
    OP
    Dec 1, 2013
    11
    @cutehalo
    @rwx
    @jun1st
    @alexrezit
    @sdjl
    刚才突然想到一个问题,iphone5s虽然是小屏幕,但是他的分辨率达到了1136x640,那么用Media query 判断最大宽度的方法应该就不适用了吧。。。那么还有其他什么办法吗?
    alexrezit
    alexrezit
    Dec 1, 2013❤️1
    12
    @shpasspass
    width 还是 320 而不是 640, 只是 pixel density 会变了, 而这个 media query 也是可识别的 ([-webkit-]min-device-pixel-ratio). 这些东西看起来复杂, 其实查查文档就都知道了, 可以学一下当作小常识记住, 我根本不做前端都知道. -__-
    alexrezit
    alexrezit
    Dec 1, 2013
    13
    @alexrezit
    噢对了以上可以延伸到所有 retina 显示设备.
    shpasspass
    shpasspass
    OP
    Dec 1, 2013
    14
    @alexrezit 谢了,我再去查查
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   4649 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 40ms · UTC 01:33 · PVG 09:33 · LAX 17:33 · JFK 20:33
    ♥ Do have faith in what you're doing.