├── css
└── styles.css
└── index.html
/css/styles.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | color: red;
3 | }
4 |
5 | /* 2 - Sintaxe, apenas para telas, breakpoint */
6 | @media screen and (max-width: 500px) {
7 | h1 {
8 | color: blue;
9 | }
10 | }
11 |
12 | /* 3 - Outros modos */
13 | /* all, print, screen, speech */
14 | @media print and (max-width: 600px) {
15 | h1 {
16 | color: green;
17 | }
18 | }
19 |
20 | /* 4 - Todos os modos */
21 | @media (max-width: 700px) {
22 | h2 {
23 | color: purple;
24 | }
25 | }
26 |
27 | /* 5 - Mobile first */
28 | @media (min-width: 200px) {
29 | h2 {
30 | color: teal;
31 | }
32 | }
33 |
34 | /* 6 - AND na media query */
35 | @media (min-width: 300px) and (max-width: 400px) {
36 | h3 {
37 | font-size: 3em;
38 | }
39 | }
40 |
41 | /* 7 - Orientation */
42 | @media (orientation: landscape) {
43 | h3 {
44 | color: brown;
45 | }
46 | }
47 |
48 | /* 8 - OR na media query */
49 | @media (max-width: 200px), (orientation: landscape) {
50 | h3 {
51 | font-size: 4em;
52 | }
53 | }
54 |
55 | /* 9 - Cuidado ao aplicar */
56 | /* Regras depois da MQ a sobreescrevem */
57 | @media (min-width: 600px) {
58 | h4 {
59 | color: red;
60 | }
61 | }
62 |
63 | h4 {
64 | color: blue;
65 | }
66 |
67 | /* 10 - breakpoints */
68 | h5 {
69 | font-size: 3em;
70 | }
71 |
72 | /* 320px - 480px = mobile */
73 | /* Em mobile first não precisa de MQ */
74 | h5 {
75 | color: aqua;
76 | }
77 |
78 | /* 480px - 768px = tablet */
79 | @media (min-width: 480px) {
80 | h5 {
81 | color: burlywood;
82 | }
83 | }
84 |
85 | /* 768px - 1024px = telas menores, laptops */
86 | @media (min-width: 768px) {
87 | h5 {
88 | color: cadetblue;
89 | }
90 | }
91 |
92 | /* 1024px - 1200px = desktop */
93 | @media (min-width: 1024px) {
94 | h5 {
95 | color: coral;
96 | }
97 | }
98 |
99 | /* 1200 e + = telas maiores, tvs */
100 | @media (min-width: 1200px) {
101 | h5 {
102 | color: darkorchid;
103 | }
104 | }
105 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Media Query
9 |
10 |
11 |
12 | Media Query
13 | Testando algo
14 | Testando mais uma coisa
15 | Cuidado nas media queries
16 | Breakpoints
17 |
18 |
19 |
--------------------------------------------------------------------------------