Common Breakpoints
Common Breakpoints: SCSS CODE: @mixin for-phone{ @media (max-width: 599px) { @content; } } @mixin for-tab-p { @media (min-width: 600px) { @content; } } @mixin for-tab-l { @media (min-width: 900px) { @content; } } @mixin for-desktop{ @media (min-width: 1200px) { @content; } } @mixin for-desktop-big { @media (min-width: 1800px) { @content; } } // usage .my-box { padding: 10px; @include for-desktop { padding: 20px; } } /* Smartphones (portrait and landscape) ----------- */ @media only screen and ( min-device-width : 320px ) and ( max-device-width : 480px ) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and ( min-width : 321px ) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and ( max-width : 320px ) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and ( min-device-width : 768px ) and ( max-device-width : 1024px ) { /* Styles *...