Created
June 19, 2022 21:15
-
-
Save yuriy-o/4d4d95ae25e6edacc553c9f575050150 to your computer and use it in GitHub Desktop.
Миксин для адаптивки
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin mq($type) { | |
| $mobile: 480px; | |
| $tablet: 768px; | |
| $desktop: 1200px; | |
| @if $type == 'mobile-only' { | |
| @media screen and (max-width: #{$tablet - 0.02}) { | |
| @content; | |
| } | |
| } | |
| @if $type == 'mobile' { | |
| @media screen and (min-width: $mobile) { | |
| @content; | |
| } | |
| } | |
| @if $type == 'tablet-only' { | |
| @media screen and (min-width: $tablet) and (max-width: #{$desktop - 0.02}) { | |
| @content; | |
| } | |
| } | |
| @if $type == 'tablet' { | |
| @media screen and (min-width: $tablet) { | |
| @content; | |
| } | |
| } | |
| @if $type == 'not-desktop' { | |
| @media screen and (max-width: #{$desktop - 0.02}) { | |
| @content; | |
| } | |
| } | |
| @if $type == 'desktop' { | |
| @media screen and (min-width: $desktop) { | |
| @content; | |
| } | |
| } | |
| @if $type == 'retina' { | |
| @media (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { | |
| @content; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
➡️ Mobile: Up to 480px
➡️ Extra small devices: 481px to 767px
➡️ Small tablets: 768px to 991px
➡️ Large tablets/laptops: 992px to 1199px
➡️ Desktops: 1200px to 1919px
➡️ Extra large screens: 1920px and up