- Mobile (Smartphone) max-width: 480px
- Low Resolution Tablets and ipads max-width: 767px
- Tablets Ipads portrait mode max-width:1024px
- Desktops max-width:1280px
- Huge size (Larger screen) max-width: 1281px and greater
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
/* CSS */
}
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
/* CSS */
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
/* CSS */
}
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
/* CSS */
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
/* CSS */
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
/* CSS */
}
$minMobile: 320px;
$maxMobile: 480px;
$minTablet: $maxMobile + 1;
$maxTablet: 767px;
$minPad: $maxTablet + 1;
$maxPad: 1024px;
$minLaptop: $maxPad + 1;
$maxLaptop: 1280px;
@mixin responsive($device) {
@if $device == 'mobile' {
@media screen and (min-width: $minMobile) and (max-width: $maxMobile) {
@content;
}
} @else if $device == 'tablet' {
@media screen and (min-width: $minTablet) and (max-width: $maxTablet) {
@content;
}
} @else if $device == 'pad' {
@media screen and (min-width: $minPad) and (max-width: $maxPad) and (orientation: landscape) {
@content;
}
} @else if $device == 'laptop' {
@media screen and (min-width: $minLaptop) and (max-width: $maxLaptop) {
@content;
}
}
}
