-
Notifications
You must be signed in to change notification settings - Fork 142
Respond To
Snugug edited this page Nov 24, 2013
·
6 revisions
Breakpoint now includes the alternative Respond-to syntax which provides for slightly more semantic reading of your media queries when used. There's nothing additional you need to import, and it supports all of the features of standard Breakpoint. Usage is simple; use the add-breakpoint function to add a named breakpoint to your list, and save that result back to the $breakpoints variable.
// We can use all of the Breakpoint control variables with respond-to as well!
$breakpoint-no-query-fallbacks: true;
$breakpoint-to-ems: true;
// These numbers were chosen at random. Don't look too far into them.
$breakpoints: add-breakpoint('one column to two columns', 456px);
$breakpoints: add-breakpoint('between medium and large', (876px 1324px, 'no-query' '.no-mq'));
$breakpoints: add-breakpoint('high resolution', min-resolution 1.5dppx);
$breakpoints: add-breakpoint('handheld device or landscape', (handheld, orientation landscape));
$breakpoints: add-breakpoint('coarse input', pointer coarse);
// What $breakpoints looks like under the hood, utilizing Sass 3.3 Maps
// $breakpoints: ('one column to two columns': 456px,
// 'between medium and large': (876px 1324px, 'no-query' '.no-mq'),
// 'high resolution': (min-resolution 1.5dppx),
// 'handheld device or landscape': (handheld, orientation landscape),
// 'coarse input': (pointer coarse)
// );
#foo {
@include respond-to('one column to two columns') {
// We can, of course, use breakpoint-get-context as well with respond-to
content: "min-width:" breakpoint-get-context('min-width');
}
@include respond-to('between medium and large') {
content: 'This is between a medium and large size';
}
@include respond-to('high resolution') {
content: 'This has a fairly high resolution';
}
@include respond-to('handheld device or landscape') {
content: "Handheld device, or maybe it's in landscape";
}
@include respond-to('coarse input', $no-query: '.touch') {
content: 'Coarse input method';
}
}@media (min-width: 28.5em) {
#foo {
content: "min-width:" 456px;
}
}
@media (min-width: 54.75em) and (max-width: 82.75em) {
#foo {
content: 'This is between a medium and large size';
}
}
.no-mq #foo {
content: 'This is between a medium and large size';
}
@media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
#foo {
content: 'This has a fairly high resolution';
}
}
@media handheld, (orientation: landscape) {
#foo {
content: "Handheld device, or maybe it's in landscape";
}
}
@media (pointer: coarse) {
#foo {
content: 'Coarse input method';
}
}
.touch #foo {
content: 'Coarse input method';
}