zhangyaochun / mediaqueries

this is a mixin for sass Mobile

mediaQueries

this is a mixin for sass Mobile use media query

see more from demo

how to run demo

sass demo.scss demo.css

iPad media query

min-device-width: 768px
max-device-width: 1024px

1. iPad1-iPad2-iPadmini
2. iPad3-iPad4 has Retina

iPhone media query

1. iPhone2G-4S

min-device-width: 320px
max-device-width: 480px

Not: iPhone4 and 4S has Retina

2. iPhone5

min-device-width: 320px
max-device-width: 568px

screen

1. {param} $resMin for min-width 
2. {param} $resMax for max-width

@media screen and (min-width: $resMin) and (max-width: $resMax) {
    @content;
}

max-screen

1.{param} $res for max-width 

@media screen and (max-width: $res) {
    @content;
}

min-screen

1.{param} $res for min-width 

@media screen and (min-width: $res) {
    @content;
}

orientation

1.{param} $orientation for orientation

@media screen and (orientation: $orientation) {
    @content;
}