Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// @media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
// @media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
// @media (min-width:641px) { portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones }
// @media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
// @media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
// @media (min-width:1281px) { /* hi-res laptops and desktops */ }
@mixin bp-phone {
@media all and (min-width: 140px) and (max-width: 640px) {
@content;
}
}
@mixin bp-tablet {
@media all and (min-width: 641px) and (max-width: 1024px) {
@content;
}
}
@mixin bp-tablet-portrait {
@media all and (min-width: 641px) and (orientation: portrait) {
@content;
}
}
@mixin bp-tablet-landscape {
@media all and (min-width: 641px) and (orientation: landscape) {
@content;
}
}
@mixin bp-desktop {
@media all and (min-width: 1280px) {
@content;
}
}
# notes
- use with `combine-media-queries` - https://www.npmjs.com/package/gulp-combine-media-queries
@import 'breakpoints';
// REM unit sizing, for example
.html {
font-size: 18px;
@include bp-phone {
font-size: 12px;
}
@include bp-tablet {
font-size: 14px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.