59 lines
1.1 KiB
SCSS
59 lines
1.1 KiB
SCSS
//MEDIA QUERY MANAGER
|
|
|
|
/*$breakpoint argument choices:
|
|
- phone
|
|
- tab-port
|
|
- tab-land
|
|
- desk
|
|
- big-desktop
|
|
*/
|
|
|
|
@mixin MediaQuery($breakpoint) {
|
|
// max-width:600px;
|
|
@if $breakpoint==phone {
|
|
@media only screen and (max-width: 37.5em) {
|
|
@content
|
|
}
|
|
}
|
|
|
|
@if $breakpoint==tab-p {
|
|
// min-width:601px;
|
|
// max-width:900px;
|
|
@media only screen and (min-width: 601px) and (max-width: 900px) {
|
|
@content
|
|
}
|
|
}
|
|
|
|
@if $breakpoint==tab-l {
|
|
// min-width:901px;
|
|
// max-width:1200px;
|
|
@media only screen and (min-width: 901px) and (max-width: 1200px) {
|
|
@content
|
|
}
|
|
}
|
|
|
|
@if $breakpoint==laptop {
|
|
// min-width:1201px;
|
|
// max-width:1366px;
|
|
@media only screen and (min-width: 1201px) and (max-width: 1366px) {
|
|
@content
|
|
}
|
|
}
|
|
|
|
@if $breakpoint==desk {
|
|
// min-width:1201px;
|
|
// max-width:1800px;
|
|
@media only screen and (min-width: 1201px) and (max-width: 1800px) {
|
|
@content
|
|
}
|
|
}
|
|
|
|
@if $breakpoint==big-d {
|
|
// min-width:1801px;
|
|
// max-width:4000px;
|
|
@media only screen and (min-width: 1801px) and (max-width: 4000px) {
|
|
@content
|
|
}
|
|
}
|
|
}
|