xxxxxxxxxx
// X-Small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { }
// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { }
// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { }
// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { }
// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { }
// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width
xxxxxxxxxx
$break-points: (
mobile: 480px,
tablet: 720px,
desktopS: 960px,
desktop: 1240px,
desktopHD: 1920px
);
/** Helper to build @media query. Use named arguments only! */
@mixin breakpoint-range($mode: screen, $from: false, $to: false, $extra: ()) {
/** Checking arguments consistency */
@each $key in ($from, $to) {
@if $key and not map.has-key($break-points, $key) {
@error "Available values for ($from, $to) args are: #{map.keys($break-points)}";
};
};
/** Accumulator */
$conditions: $mode;
/** Combining breakpoints dependencies */
@each $key, $value in (
min-width: $from,
max-width: $to,
) {
@if $value {
$modifier: if($key == 'max-width', -1px, 0px);
$condition: " and (#{$key}: #{map.get($break-points, $value) - $modifier})";
$conditions: string.insert($conditions, $condition, -1);
}
}
/** Combining rest dependencies */
@each $key, $value in $extra {
$condition: " and (#{$key}: #{$value})"
}
/** Building final media query */
@media #{$conditions} { @content; }
}