Generic smartphone CSS media query

in code


@media only screen 
    and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: portrait),
only screen
    and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: landscape) {
        .foo {
            bar: norf;
        }
}

I see a great many media queries targeted for different devices-and it’s a good way of detecting the exact device viewing your site-but there doesn’t seem to be many rules for general smartphone use. This rule will cover screen sizes ranging from the iPhone 3S through to the iPhone 6, Samsung Galaxy II and Nexus 5.

And Sass-ified:

@mixin breakpoint($point, $size: '') {
    $smart_min: 320px;
    $smart_max: 736px;

    @if $point == smartphone {
         @media only screen and (min-device-width: $smart_min) and (max-device-width: $smart_max) and (orientation: portrait), 
         only screen and (min-device-width: $smart_min) and (max-device-width: $smart_max) and (orientation: landscape) {
            @content;  
        }
    }

    @if $point == portrait {
        @media only screen and (orientation: portrait) {
            @content;
        }
    }

    @if $point == landscape {
        @media only screen and (orientation: landscape) {
            @content;
        }
    }

    @if $point == max {
        @media only screen and (max-width: $size + px) {
            @content;
        }
    }

    @if $point == min {
        @media only screen and (min-width: $size + px) {
            @content;
        }
    }
}


Decompression

in me


Your email address will not be published. Required fields are marked *