Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Media Query Manager for Mobile First or Desktop First | SAAS
// Media Query Manager
// 1) Desktop First
/*
0 600px - phone
600px - 900px - portrait tablet
900px - 1200px -Landscap tablet
1200px - 1800px - Normal Css will apply Here
1800 - onward - for big desktops
*/
@mixin respond($breakpoint) {
@if $breakpoint == phone {
@media (max-width: 600px) {
@content;
}
}
@if $breakpoint == tab-land {
@media (max-width: 900px) {
@content;
}
}
@if $breakpoint == tab-port {
@media (max-width: 1200px) {
@content;
}
}
}
// Mobile First
/*
0 600px - normal CSS
600px - 900px - small
900px - 1200px -medium
1200px - 1800px - large
*/
/*
Options To Pass in Argument
small
medium
large
*/
@mixin respond($breakpoint) {
@if $breakpoint == small {
@media (min-width: 530px) {
@content;
}
}
@if $breakpoint == medium {
@media (min-width: 800px) {
@content;
}
}
@if $breakpoint == large {
@media (min-width: 1200px) {
@content;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment