// Breakpoints ------------------------------- // Warning: you may be tempted to change these numbers, but trust me, they // were very carefully selected to match against commonly occuring screen // resolutions, with the exception of 1440 but that's only because it's // disproportionately represented among developers and our Macbooks. However, // the 1440 breakpoint is close enough to the standard 1368 laptop screens to // be totally reasonable in practice. // --------------------------------------------- @da_baseline: ~"only screen and (min-width: 320px)"; @da_2x_small: ~"only screen and (min-width: 480px)"; @da_x_small: ~"only screen and (min-width: 640px)"; @da_small: ~"only screen and (min-width: 768px)"; @da_medium: ~"only screen and (min-width: 1024px)"; @da_large: ~"only screen and (min-width: 1280px)"; @da_x_large: ~"only screen and (min-width: 1440px)"; // Liquid/ Fixed Widths ---------------------- // Again, I don't recommend you changing these numbers as they are all // selected because many different numbers can divide into them, making them // quite useful for building grid layouts. // --------------------------------------------- @pw_baseline: 100%; @pw_2x_small: 100%; @pw_x_small: 100%; @pw_small: 76.8rem; @pw_medium: 96rem; @pw_large: 115.2rem; @pw_x_large: 134.4rem; // Alternative Orientation Variables ----------- // That is, there are two ways to write device-specific media queries, // depending on your personal preference. Here's the iPhone 5 as an example: // @media @ds_iphone_5 @orientation_landscape {} // @media @ds_iphone_5_landscape {} // --------------------------------------------- @orientation_landscape: ~"and (orientation : landscape)"; @orientation_portrait: ~"and (orientation : portrait)"; // Aspect Ratio Media Queries ------------------ // --------------------------------------------- // 9:16 devices, 720p: Blackberry Z30; Motorola Droid Maxx, Moto G, Moto X(1), Razr HD; Samsung GN2; Sony Xperia S // 9:16 devices, HD:3: Google Nexus 5; HTC Hero M7, M8; LG G2; Moto X(2), Nokia Lumia Icon; Samsung GS4, GS5, GN3; Sony Xperia Z1, Z2, Z3 // 9:16 devices, HD:4: LG G3, Samsung GN4 // 9:16 devices, iPhone 6 Plus @ds_ratio_9_16: ~"only screen and (device-aspect-ratio: 9/16), only screen and (device-aspect-ratio: 16/9)"; // 9:16 devices in landscape @ds_ratio_9_16_landscape: ~"only screen and (device-aspect-ratio: 16/9)"; // 9:16 devices in portrait @ds_ratio_9_16_portrait: ~"only screen and (device-aspect-ratio: 9/16)"; // 2:3 devices: Apple iPhone 1/2/3/4 @ds_ratio_2_3: ~"only screen and (device-aspect-ratio: 2/3), only screen and (device-aspect-ratio: 3/2)"; // 2:3 devices in landscape @ds_ratio_2_3_landscape: ~"only screen and (device-aspect-ratio: 3/2) and (orientation : landscape)"; // 2:3 devices in portrait @ds_ratio_2_3_portrait: ~"only screen and (device-aspect-ratio: 2/3) and (orientation : portrait)"; // 3:5 devices: Nokia Lumia 920, 925, 928 @ds_ratio_3_5: ~"only screen and (device-aspect-ratio: 3/5), only screen and (device-aspect-ratio: 5/3)"; // 3:5 devices in landscape @ds_ratio_3_5_landscape: ~"only screen and (device-aspect-ratio: 5/3) and (orientation : landscape)"; // 3:5 devices in portrait @ds_ratio_3_5_portrait: ~"only screen and (device-aspect-ratio: 3/5) and (orientation : portrait)"; // 5:8 devices: Samsung GN1 @ds_ratio_5_8: ~"only screen and (device-aspect-ratio: 5/8), only screen and (device-aspect-ratio: 8/5)"; // 5:8 devices in landscape @ds_ratio_5_8_landscape: ~"only screen and (device-aspect-ratio: 8/5)"; // 5:8 devices in portrait @ds_ratio_5_8_portrait: ~"only screen and (device-aspect-ratio: 5/8)"; // 2:3 devices: iPhone 1, 2, 3(G), 4(s) @ds_ratio_5_8: ~"only screen and (device-aspect-ratio: 2/3), only screen and (device-aspect-ratio: 3/2)"; // 2:3 devices in landscape @ds_ratio_5_8_landscape: ~"only screen and (device-aspect-ratio: 3/2) and (orientation : landscape)"; // 2:3 devices in portrait @ds_ratio_5_8_portrait: ~"only screen and (device-aspect-ratio: 2/3) and (orientation : portrait)"; // 3:4 devices: iPad 1, 2, 3, 4, Air, Mini @ds_ratio_3_4: ~"only screen and (device-aspect-ratio: 3/4), only screen and (device-aspect-ratio: 4/3)"; // True HD phones in landscape @ds_ratio_3_4_landscape: ~"only screen and (device-aspect-ratio: 4/3) and (orientation : landscape)"; // True HD phones in portrait @ds_ratio_3_4_portrait: ~"only screen and (device-aspect-ratio: 3/4) and (orientation : portrait)"; // --------------------------------------------- // --------------------------------------------- // Android Media Queries ----------------------- // --------------------------------------------- // Actual Resolution: 720 X 1280 // Display Resolution: 360 X 640 // Device-pixel-ratio: 2 // 720 HD:2 phones: Blackberry Z30; Motorola Droid Maxx, Moto G, Moto X(1), Razr HD; Samsung GN2; Sony Xperia S @ds_720p_hd2: ~"only screen and (min-device-width : 360px) and (max-device-width : 640px) and (min-resolution: 2dppx)"; // 720 HD:2 phones in landscape @ds_720p_hd2_landscape: ~"only screen and (min-device-width : 360px) and (max-device-width : 640px) and (min-resolution: 2dppx) and (orientation : landscape)"; // 720 HD:2 phones in portrait @ds_720p_hd2_portrait: ~"only screen and (min-device-width : 360px) and (max-device-width : 640px) and (min-resolution: 2dppx) and (orientation : portrait)"; // Actual Resolution: 768 X 1280 // Display Resolution: 384 X 640 // Device-pixel-ratio: 2 // 768 WXGA:2 phones: Blackberry Z10; Google Nexus 4 @ds_768_wxga2: ~"only screen and (min-device-width : 384px) and (max-device-width : 640px) and (min-resolution: 2dppx) and (device-aspect-ratio: 3/5), only screen and (min-device-width : 384px) and (max-device-width : 640px) and (min-resolution: 2dppx) and (device-aspect-ratio: 5/3)"; // True HD phones in landscape @ds_768_wxga2_landscape: ~"only screen and (min-device-width : 384px) and (max-device-width : 640px) and (min-resolution: 2dppx) and (device-aspect-ratio: 5/3) and (orientation : landscape)"; // True HD phones in portrait @ds_768_wxga2_portrait: ~"only screen and (min-device-width : 384px) and (max-device-width : 640px) and (min-resolution: 2dppx) and (device-aspect-ratio: 3/5) and (orientation : portrait)"; // Actual Resolution: 800 X 1280 // Display Resolution: 400 X 640 // Device-pixel-ratio: 2 // 800 WXGA:2 phones: Samsung GN1 @ds_800_wxga2: ~"only screen and (min-device-width : 400px) and (max-device-width : 640px) and (min-resolution: 2dppx) and (device-aspect-ratio: 5/8), only screen and (min-device-width : 400px) and (max-device-width : 640px) and (min-resolution: 2dppx) and (device-aspect-ratio: 8/5)"; // True HD phones in landscape @ds_800_wxga2_landscape: ~"only screen and (min-device-width : 400px) and (max-device-width : 640px) and (min-resolution: 2dppx) and (device-aspect-ratio: 8/5) and (orientation : landscape)"; // True HD phones in portrait @ds_800_wxga2_portrait: ~"only screen and (min-device-width : 400px) and (max-device-width : 640px) and (min-resolution: 2dppx) and (device-aspect-ratio: 5/8) and (orientation : portrait)"; // Actual Resolution: 1080 X 1920 // Display Resolution: 360 X 640 // Device-pixel-ratio: 3 // 1080 HD:3 phones: Google Nexus 5, HTC One M7+, LG G2; Moto X(2), Nokia Lumia Icon; Samsung GS4, GS5, GN3; Sony Xperia Z1, Z2, Z3 @ds_1080_hd3: ~"only screen and (min-device-width : 360px) and (max-device-width : 640px) and (min-resolution: 3dppx)"; // 1080 HD:3 phones in landscape @ds_1080_hd3_landscape: ~"only screen and (min-device-width : 360px) and (max-device-width : 640px) and (min-resolution: 3dppx) and (orientation : landscape)"; // 1080 HD:3 phones in portrait @ds_1080_hd3_portrait: ~"only screen and (min-device-width : 360px) and (max-device-width : 640px) and (min-resolution: 3dppx) and (orientation : portrait)"; // Actual Resolution: 1440 X 2560 // Display Resolution: 360 X 640 // Device-pixel-ratio: 4 // WQHD:4 phones: LG G3, Google Nexus 6, Samsung GN4 @ds_wqhd4: ~"only screen and (min-device-width : 360px) and (max-device-width : 640px) and (min-resolution: 4dppx)"; // Full HD phones in landscape @ds_wqhd4_landscape: ~"only screen and (min-device-width : 360px) and (max-device-width : 640px) and (min-resolution: 4dppx) and (orientation : landscape)"; // Full HD phones in portrait @ds_wqhd4_portrait: ~"only screen and (min-device-width : 360px) and (max-device-width : 640px) and (min-resolution: 4dppx) and (orientation : portrait)"; // --------------------------------------------- // --------------------------------------------- // Windows Phone Queries ----------------------- // --------------------------------------------- // Actual Resolution: 768 X 1280 // Display Resolution: 320 X 533 // Device-pixel-ratio: 2.4 // 768 WXGA:2.4 phones: Nokia Lumia 920, 925, 928 @ds_768_wxga24: ~"only screen and (min-device-width : 320px) and (max-device-width : 533px) and (min-resolution: 2.4dppx) and (device-aspect-ratio: 320/533), only screen and (min-device-width : 320px) and (max-device-width : 533px) and (min-resolution: 2.4dppx) and (device-aspect-ratio: 533/320)"; // True HD phones in landscape @ds_768_wxga24_landscape: ~"only screen and (min-device-width : 320px) and (max-device-width : 533px) and (min-resolution: 2.4dppx) and (device-aspect-ratio: 533/320) and (orientation : landscape)"; // True HD phones in portrait @ds_768_wxga24_portrait: ~"only screen and (min-device-width : 320px) and (max-device-width : 533px) and (min-resolution: 2.4dppx) and (device-aspect-ratio: 320/533) and (orientation : portrait)"; // --------------------------------------------- // --------------------------------------------- // iOS Media Queries --------------------------- // --------------------------------------------- // Actual Resolution: 768 X 1024 // Display Resolution: 768 X 1024 // Device-pixel-ratio: 1 // All iPads in portrait & landscape @ds_ipad: ~"only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (device-aspect-ratio: 3/4), only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (device-aspect-ratio: 4/3)"; // All iPads in landscape @ds_ipad_landscape: ~"only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (device-aspect-ratio: 4/3) and (orientation : landscape)"; // All iPads in portrait @ds_ipad_portrait: ~"only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (device-aspect-ratio: 3/4) and (orientation : portrait)"; // ipad Mini, iPad 1 & 2 in portrait & landscape @ds_ipad_early: ~"only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) and (device-aspect-ratio: 3/4), only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) and (device-aspect-ratio: 4/3)"; // ipad Mini, iPad 1 & 2 in landscape @ds_ipad_early_landscape: ~"only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) and (device-aspect-ratio: 4/3) and (orientation : landscape)"; // ipad Mini, iPad 1 & 2 in portrait @ds_ipad_early_portrait: ~"only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) and (device-aspect-ratio: 3/4) and (orientation : portrait)"; // Actual Resolution: 768 X 1024 // Display Resolution: 1536 X 2048 // Device-pixel-ratio: 2 // Retina iPad (includes Mini Retina and Air) in portrait & landscape @ds_ipad_retina: ~"only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 3/4), only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 4/3)"; // Retina iPad in landscape @ds_ipad_retina_landscape: ~"only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 4/3) and (orientation : landscape)"; // Retina iPad in portrait @ds_ipad_retina_portrait: ~"only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 3/4) and (orientation : portrait)"; // Actual Resolution: 320 X 480 // Display Resolution: 320 X 480 // Device-pixel-ratio: 1 // iPhone 2G-3GS Media Queries @ds_iphone_early: ~"only screen and (min-device-width : 320px) and (max-device-width : 480px) and (-webkit-min-device-pixel-ratio: 1) and (device-aspect-ratio: 2/3), only screen and (min-device-width : 320px) and (max-device-width : 480px) and (-webkit-min-device-pixel-ratio: 1) and (device-aspect-ratio: 3/2)"; // iPhone 2G-3GS in landscape @ds_iphone_early_landscape: ~"only screen and (min-device-width : 320px) and (max-device-width : 480px) and (-webkit-min-device-pixel-ratio: 1) and (device-aspect-ratio: 3/2) and (orientation : landscape)"; // iPhone 2G-3GS in portrait @ds_iphone_early_portrait: ~"only screen and (min-device-width : 320px) and (max-device-width : 480px) and (-webkit-min-device-pixel-ratio: 1) and (device-aspect-ratio: 2/3) and (orientation : portrait)"; // Actual Resolution: 320 X 480 (LATER) // Display Resolution: 640 X 960 (LATER) // Device-pixel-ratio: 2 // iPhone 4, 4S Media Queries @ds_iphone_4: ~"only screen and (min-device-width : 320px) and (max-device-width : 480px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3), only screen and (min-device-width : 320px) and (max-device-width : 480px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 3/2)"; // iPhone 2G-4S in landscape @ds_iphone_4_landscape: ~"only screen and (min-device-width : 320px) and (max-device-width : 480px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 3/2) and (orientation : landscape)"; // iPhone 2G-4S in portrait @ds_iphone_4_portrait: ~"only screen and (min-device-width : 320px) and (max-device-width : 480px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) and (orientation : portrait)"; // Actual Resolution: 320 X 568 // Display Resolution: 640 X 1136 // Device-pixel-ratio: 2 // iPhone 5(s)(c) in portrait & landscape @ds_iphone_5: ~"only screen and (min-device-width : 320px) and (max-device-width : 568px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71), only screen and (min-device-width : 320px) and (max-device-width : 568px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 71/40)"; // iPhone 5 in landscape @ds_iphone_5_landscape: ~"only screen and (min-device-width : 320px) and (max-device-width : 568px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 71/40) and (orientation : landscape)"; // iPhone 5 in portrait @ds_iphone_5_portrait: ~"only screen and (min-device-width : 320px) and (max-device-width : 568px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation : portrait)"; // Actual Resolution: 375 X 667 // Display Resolution: 750 X 1334 // Device-pixel-ratio: 2 // iPhone 6 in portrait & landscape @ds_iphone_6: ~"only screen and (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 375/667), only screen and (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 667/375)"; // iPhone 6 in landscape @ds_iphone_6_landscape: ~"only screen and (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 667/375) and (orientation : landscape)"; // iPhone 6 in portrait @ds_iphone_6_portrait: ~"only screen and (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 375/667) and (orientation : portrait)"; // Actual Resolution: 414 × 736 // Display Resolution: 1242 × 2208 // Device-pixel-ratio: 3 // iPhone 6 Plus in portrait & landscape @ds_iphone_6_plus: ~"only screen and (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio: 3)"; // iPhone 6 Plus in landscape @ds_iphone_6_plus_landscape: ~"only screen and (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation : landscape)"; // iPhone 6 Plus in portrait @ds_iphone_6_plus_portrait: ~"only screen and (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation : portrait)"; // --------------------------------------------- // ---------------------------------------------