_breakpoints.scss

// @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;
    }
}

_info.txt

# notes

- use with `combine-media-queries` - https://www.npmjs.com/package/gulp-combine-media-queries

example.scss

@import 'breakpoints';

// REM unit sizing, for example
.html {
    
    font-size: 18px;
    
    @include bp-phone {
        font-size: 12px;
    }
    
    @include bp-tablet {
        font-size: 14px;
    }
}