Created
November 6, 2013 12:05
-
-
Save gabriel-seb/7335033 to your computer and use it in GitHub Desktop.
CSS Media Queries and tips
This file contains hidden or 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
| /* Remove zoom e fixa conteudo na viewport: */ | |
| <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /> */ | |
| /* Media Queries V1.0 */ | |
| @media only screen and (max-width: 1460px) { } | |
| @media only screen and (max-width: 1279px) { } | |
| @media only screen and (max-width: 1024px) { } | |
| @media only screen and (max-width: 800px) { } | |
| @media only screen and (max-width: 500px) { } | |
| @media only screen and (max-width: 500px) and (orientation:landscape) { } | |
| @media only screen and (max-width: 500px) and (orientation:portrait) { } | |
| @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { } | |
| @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) and (max-width: 1460px) { } | |
| @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px) { } | |
| /* UPDATE 1.1 - Por vezes, pode ser melhor usar sem os métodos de orientação do dispositivo "(orientation: OOOO)" | |
| All */ | |
| @media only screen and (min-width:1200px), (max-width: 3500px) { } | |
| /* TABLET PAISAGEM */ | |
| @media only screen and (min-width:900px) and (max-width:1024px) and (orientation:landscape){ } | |
| /* TABLET RETRATO ( ou max-width:800px) */ | |
| @media only screen and (max-width:768px) and (orientation:portrait){ } | |
| /* CELULAR PAISAGEM */ | |
| @media only screen and (max-width: 854px) and (orientation:landscape) { } | |
| /* CELULAR RETRATO */ | |
| @media only screen and (max-width:500px) and (orientation:portrait) { } | |
| /* Artigo de base - http://alistapart.com/article/responsive-web-design */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment