Skip to content

Instantly share code, notes, and snippets.

@AlifArnado
Last active July 30, 2020 04:19
Show Gist options
  • Save AlifArnado/4ca4c82035364506b8484c831ea5b789 to your computer and use it in GitHub Desktop.
Save AlifArnado/4ca4c82035364506b8484c831ea5b789 to your computer and use it in GitHub Desktop.
/* responsive */
@media (max-width: 320px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 320px) and (min-resolution: 192dpi), (max-width: 320px) and (min-resolution: 2dppx) {
body {
background-color: #7a7206;
}
body:before {
content: "Phone Viewport";
}
}
@media (min-width: 321px) and (max-width: 375px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 321px) and (max-width: 375px) and (min-resolution: 192dpi), (min-width: 321px) and (max-width: 375px) and (min-resolution: 2dppx) {
body {
background-color: #b98a53;
}
body:before {
content: "SM Phone Viewport";
}
}
@media (min-width: 376px) and (max-width: 426px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 376px) and (max-width: 426px) and (min-resolution: 192dpi), (min-width: 376px) and (max-width: 426px) and (min-resolution: 2dppx) {
body {
background-color: #d8cd3b;
}
body:before {
content: "Large Phone Viewport";
}
}
@media (min-width: 427px) and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 427px) and (max-width: 768px) and (min-resolution: 192dpi), (min-width: 427px) and (max-width: 768px) and (min-resolution: 2dppx) {
body {
background-color: #cdee12;
}
body:before {
content: "Greather Tab Viewport";
}
}
@media (min-width: 769px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 769px) and (max-width: 1024px) and (min-resolution: 192dpi), (min-width: 769px) and (max-width: 1024px) and (min-resolution: 2dppx) {
body {
background-color: #a8a015;
}
body:before {
content: "Desktop";
}
}
@media (min-width: 1025px) and (max-width: 1920px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 1025px) and (max-width: 1920px) and (min-resolution: 192dpi), (min-width: 1025px) and (max-width: 1920px) and (min-resolution: 2dppx) {
body {
background-color: #28272f;
color: #fff;
}
body:before {
content: "Fullscreen";
}
}
@import "../node_modules/include-media/dist/include-media";
/* responsive */
@font-face {
font-family: font-type1;
src: url('../font/trashhand.ttf');
}
$_primary_color: #350247;
@include media('>desktop',
'<=Lgdesktop',
'retina2x') {}
@include media('>tablet',
'<=desktop',
'retina2x') {}
@include media('>mobile_l',
'<=tablet') {}
@include media('>mobile_m',
'<=mobile_l') {}
@include media('>phone',
'<=mobile_m',
'screen') {}
@include media('<=phone') {}
@include media('>=393px',
'<mobile_l') {}
@include media('>=414px',
'<=mobile_l') {}
@include media('>=360px',
'<mobile_m',
'screen') {}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment