bellmaker
Version:
Responsive CSS media query library for LESS and SASS, with device-agnostic and device-specific breakpoints
272 lines (213 loc) • 17.2 kB
text/less
// 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)";
// ---------------------------------------------
// ---------------------------------------------