anthonyshort / _media-queries.scss

Created March 13, 2012


    
    View _media-queries.scss 
  
  
      _media-queries.scss
    
    
        Raw
      
    
    File suppressed. Click to show.
  
  
            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
            13
            14
            15
            16
            17
            18
            19
            20
            21
            22
            23
            24
            25
            26
            27
            28
            29
            30
            31
            32
            33
            34
            35
            36
            37
            38
            39
            40
            41
            42
            43
            44
            45
            46
            47
            48
            49
            50
            51
            52
            53
            54
            55
            56
            57
            58
            59
            60
            61
            62
            63
            64
            65
            66
            67
            68
            69
            70
            71
            72
            73
            74
            75
            76
            77
            78
            79
            80
            81
            82
            83
            84
            85
            86
            87
            88
            89
            90
            91
            92
            93
            94
            95
            96
            97
            98
            99
            100
            101
            102
            103
            104
            105
            106
            107
            108
            109
            110
            111
            112
            113
            114
            115
            116
            117
            118
            119
            120
            121
            122
            123
            124
            125
            126
            127
            128
            129
            130
            131
            132
            133
            134
            135
            136
            137
            138
            139
            140
            141
            142
            143
            144
            145
          
          
            // Media Queries in Sass 3.2
//
// These mixins make media queries a breeze with Sass.
// The media queries from mobile up until desktop all 
// trigger at different points along the way
//
// And important point to remember is that and width
// over the portrait width is considered to be part of the
// landscape width. This allows us to capture widths of devices
// that might not fit the dimensions exactly. This means the break
// points are seamless.
 
$mq-mobile-portrait		: 320px !default;
$mq-mobile-landscape	: 480px !default;
$mq-tablet-portrait		: 768px !default;
$mq-tablet-landscape	: 1024px !default;
$mq-desktop				: 1382px !default;
 
// Both portrait and landscape
@mixin mobile-only {
	@media (max-width : $mq-mobile-landscape) {
		@content;
	}
}
 
// Everything up to and including the portrait width of the phone
// Since it's the smallest query it doesn't need a min
@mixin mobile-portrait-only {
	@media (max-width : $mq-mobile-portrait) {
		@content;
	}
}
 
// Everything up to and including the mobile portrait
@mixin mobile-portrait-and-below {
	@media (max-width : $mq-mobile-portrait) {
		@content;
	}
}
 
// Everything above and including the mobile portrait
@mixin mobile-portrait-and-up {
	@media (min-width : $mq-mobile-portrait) {
		@content;
	}
}
 
// Everthing larger than a portrait mobile up until mobile landscape
@mixin mobile-landscape-only {
	@media only screen and (min-width : $mq-mobile-portrait + 1) and (max-width : $mq-mobile-landscape) {
		@content;
	}
}
 
// Everything up to and including the mobile landscape width
@mixin mobile-landscape-and-below {
	@media only screen and (max-width : $mq-mobile-landscape) {
		@content;
	}
}
 
// Everything above and including the mobile landscape width
@mixin mobile-landscape-and-up {
	@media only screen and (min-width : $mq-mobile-portrait + 1) {
		@content;
	}
}
 
// Both the portrait and landscape width of the tablet
// Larger than a landscape mobile but less than or equal to a landscape tablet
@mixin tablet-only {
	@media only screen and (min-width : $mq-mobile-landscape + 1) and (max-width : $mq-tablet-landscape) {
		@content;
	}
}
 
// Everything larger than mobile landscape up until the portrait width of the tablet
@mixin tablet-portrait-only {
	@media only screen and (min-width : $mq-mobile-landscape + 1) and (max-width : $mq-tablet-portrait) {
		@content;
	}
}
 
// Everything below and including the portrait width of the tablet
@mixin tablet-portrait-and-below {
	@media only screen and (max-width : $mq-tablet-portrait) {
		@content;
	}
}
 
// Everything above and including the portrait width of the tablet
@mixin tablet-portrait-and-up {
	@media only screen and (min-width : $mq-mobile-landscape + 1) {
		@content;
	}
}
 
// Larger than portrait but less than or equal to the landscape width
@mixin tablet-landscape-only {
	@media only screen and (min-width : $mq-tablet-portrait + 1) and (max-width : $mq-tablet-landscape) {
		@content;
	}
}
 
// Up to and including the tablet landscape
@mixin tablet-landscape-and-below {
	@media only screen and (max-width : $mq-tablet-landscape) {
		@content;
	}
}
 
// Everything larger than portrait tablet
@mixin tablet-landscape-and-up {
	@media only screen and (min-width : $mq-tablet-portrait + 1) {
		@content;
	}
}
 
// Everything larger than a landscape tablet
@mixin desktop-and-up {
	@media only screen and (min-width : $mq-tablet-landscape + 1) {
		@content;
	}
}
 
// Everything below and including the desktop 
@mixin desktop-and-below {
	@media only screen and (max-width : $mq-desktop) {
		@content;
	}
}
 
// Everything larger than a landscape tablet but less than or equal to the desktop
@mixin desktop-only {
	@media only screen and (min-width : $mq-tablet-landscape + 1) and (max-width : $mq-desktop) {
		@content;
	}
}
 
// Retina screens have a 1.5 pixel ratio, not 2
@mixin retina {
	@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
		@content;
	}
}