Responsive breakpoints for media queries #scss #include-media #layout

breakpoints.scss

// Breakpoints for include-media
// Usage: @include media(">phone", "<=tablet") { ... }
// Usage: @include media("<=1150px") { ... }
//
// See: https://include-media.com/
// See: https://gs.statcounter.com/screen-resolution-stats
// See: https://gist.github.com/dotherightthing/06f33bf784279aa24072e0b6873c968c
// See: https://elementqueries.com/ (future technology)
//
// Phones:
//  Google Pixel 2: 411x731
//  iPhone 5 SE: 320x568
//  iPhone 6/7/8: 375x667
//  iPhone 6/7/8 Plus: 414x736
//  iPhone X: 374x812
// Netbooks:
//  Lenovo MIIX 320: ?x640
// Tablets:
//  iPad: 768x1024
//  iPad Pro: 1366x1024
// Laptop:
//  MacbookPro Air 11": 1366x768
//  Toshiba Portege: 1366x768
// Desktop:
//  MacbookPro 15" external monitor 2560x1440
//
$breakpoints: (
    phone: 414px,
    tablet: 768px,
    laptop: 1366px,
    desktop: 2000px
);