Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Retina + width media query

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #196294
    grimski
    Participant

    I’m having a problem displaying the correct version of my logo on retina devices. Because of the layout and the way the text is aligned, I use 1 version of a logo for small screen devices (in my base styles), then replace the logo with another in my 600px+ Media Query. So for so good, this works fine.

    My CSS for this is:
    Note: I use LESS, so my base, 600px+ and 2x files are all separate but ordered that way.

    [role="banner"] .logo {
        background: url(../img/content/m-logo-replacement.png) no-repeat 0 0;
    }
    
    @media only screen and (min-width: 600px) {
    
        [role="banner"] .logo {
            background-image: url(../img/content/logo-replacement.png);
        }
    }
    

    Now, I want to replace both these images with 2x retina versions. I replace the first logo (mobile) in my 2x LESS file like so:

    only screen and (-webkit-min-device-pixel-ratio: 1.5), 
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
    
        [role="banner"] .logo {
            background-image: url(../img/content/[email protected]);
            background-size: 172px 56px;
        }
    }
    

    This replaces the small screen (mobile) logo with a retina version. So my question is, how do I declare an image replacement for retina + 600px+ styles.

    I seemingly can’t put another 600px+ Media Query within the 2x as I don’t think you can nest Queries?

    I was thinking maybe I could put another Media Query in the base (1st) LESS file but set !important so the following 600px+ and 2x files don’t overwrite it?

    I’ve cut out the other breakpoint LESS files to condense this but for reference my LESS files are called in the following order:

    // BASE
    @import "page.less";
    
    // 600PX+
    @media only screen and (min-width: 600px) {
        @import "600.less";
    }
    
    // RETINA
    @media
    only screen and (-webkit-min-device-pixel-ratio: 1.5), 
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
        @import "2x.less";
    }
    

    Thanks, hope someone can help. I’m hoping this is quite straight forward and I’m overlooking something pretty basic!

    #196321
    grimski
    Participant

    Great, I’ll try this out tomorrow. Would I need to include the 3 versions like in my example (below) – or is this outdated now?

    @media
    only screen and (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 600px), 
    only screen and (min--moz-device-pixel-ratio: 1.5) and (min-width: 600px),
    only screen and (min-device-pixel-ratio: 1.5) and (min-width: 600px) {}
    

    Because I just need to do this for 1 image replacement, I guess putting this in my base CSS with !important set is fine for this? This is because I call in the 2x.less file (and other less files) like this:

    @media
    only screen and (-webkit-min-device-pixel-ratio: 1.5), 
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
        @import "2x.less";
    }
    

    So if I put it in 600.less or 2x.less files it would be nested. I suppose in future maybe importing the 2x.less without wrapping it in a Media Query would be a better approach. Then I can put as may retina @media calls as I need in 2x.less without them being nested?

    Thanks!

    #196373
    grimski
    Participant

    Thanks I’ll definitely check that out. For reference putting the following CSS in the base .less file worked:

    @media
    only screen and (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 600px), 
    only screen and (min--moz-device-pixel-ratio: 1.5) and (min-width: 600px),
    only screen and (min-device-pixel-ratio: 1.5) and (min-width: 600px) {
    
        [role="banner"] .logo {
            background-image: url(../img/content/[email protected]) !important;
            background-size: 172px 56px !important;
        }
    }
    

    Do I still need the min--moz- and -webkit-min versions, or can I sack them off now? Been using the same code for years now!

    Thanks again!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.