Created
April 2, 2020 14:11
-
-
Save prosantamazumder/64389a32f6c6cbcd22a6f089dd30b748 to your computer and use it in GitHub Desktop.
You Can Use The Code Two Standard way
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ================================================== | |
| STANDARD RESPONSIVE MEDIA QUERY CSS | |
| ================================================== | |
| /* XL Device :1200px. */ | |
| @media (min-width: 1200px) and (max-width: 1500px) { | |
| } | |
| /* LG Device :992px. */ | |
| @media (min-width: 992px) and (max-width: 1200px) { | |
| } | |
| /* MD Device :768px. */ | |
| @media (min-width: 768px) and (max-width: 991px) { | |
| } | |
| /* Extra small Device. */ | |
| @media (max-width: 767px) { | |
| } | |
| /* SM Small Device :550px. */ | |
| @media only screen and (min-width: 576px) and (max-width: 767px) { | |
| } | |
| ================================================== | |
| BEST RESPONSIVE MEDIA QUERY CSS | |
| ================================================== | |
| /*----------------------- | |
| SMALL MOBILE DEVICCE | |
| ------------------------*/ | |
| @media screen and (min-width:320px) and (max-width: 425px){ | |
| } | |
| /*--------------------- | |
| LARGE MOBILE | |
| ------------------------*/ | |
| @media screen and (min-width:568px) and (max-width: 736px){ | |
| } | |
| /*------------------- | |
| TABLET DEVICCE | |
| ---------------------*/ | |
| @media screen and (min-width:768px) and (max-width: 1024px){ | |
| } | |
| /*----------------------- | |
| LARGE LAPTOP AND PC | |
| -------------------------*/ | |
| @media screen and (min-width:1024px) and (max-width: 1368px){ | |
| } | |
| /*----------------- | |
| Larger DESKTOP | |
| ------------------*/ | |
| @media screen and (min-width:1369px) and (max-width: 1445px){ | |
| } | |
| /*-------------- | |
| MAC | |
| ---------------*/ | |
| @media screen and (min-width:1446px) and (max-width: 1950px){ | |
| .mac-none{display: none;} | |
| } | |
| ================================================== | |
| REACT JS RESPONSIVE MEDIA QUERY SCSS | |
| ================================================== | |
| $layout-dektop : 'only screen and (min-width: 1920px)'; | |
| $layout-desktop-xs: 'only screen and (min-width: 1600px) and (max-width: 1919px)'; | |
| $layout-laptop : 'only screen and (min-width: 1200px) and (max-width: 1599px)'; | |
| $layout-notebook: 'only screen and (min-width: 992px) and (max-width: 1199px)'; | |
| $layout-tablet : 'only screen and (min-width: 768px) and (max-width: 991px)'; | |
| $layout-mobile-lg : 'only screen and (max-width: 767px)'; | |
| $layout-mobile-sm : 'only screen and (max-width: 575px)'; | |
| $layout-mobile-xs : 'only screen and (max-width: 480px)'; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment