|
67 | 67 | ], |
68 | 68 | "tags": ["css", "reset", "browser", "layout"], |
69 | 69 | "author": "AmeerMoustafa" |
| 70 | + }, |
| 71 | + { |
| 72 | + "title": "Responsive Design", |
| 73 | + "description": "The different responsive breakpoints.", |
| 74 | + "code": [ |
| 75 | + "/* Phone */", |
| 76 | + ".element {", |
| 77 | + " margin: 0 10%", |
| 78 | + "}", |
| 79 | + "", |
| 80 | + "/* Tablet */", |
| 81 | + "@media (min-width: 640px) {", |
| 82 | + " .element {", |
| 83 | + " margin: 0 20%", |
| 84 | + " }", |
| 85 | + "}", |
| 86 | + "", |
| 87 | + "/* Desktop base */", |
| 88 | + "@media (min-width: 768px) {", |
| 89 | + " .element {", |
| 90 | + " margin: 0 30%", |
| 91 | + " }", |
| 92 | + "}", |
| 93 | + "", |
| 94 | + "/* Desktop large */", |
| 95 | + "@media (min-width: 1024px) {", |
| 96 | + " .element {", |
| 97 | + " margin: 0 40%", |
| 98 | + " }", |
| 99 | + "}", |
| 100 | + "", |
| 101 | + "/* Desktop extra large */", |
| 102 | + "@media (min-width: 1280px) {", |
| 103 | + " .element {", |
| 104 | + " margin: 0 60%", |
| 105 | + " }", |
| 106 | + "}", |
| 107 | + "", |
| 108 | + "/* Desktop bige */", |
| 109 | + "@media (min-width: 1536px) {", |
| 110 | + " .element {", |
| 111 | + " margin: 0 80%", |
| 112 | + " }", |
| 113 | + "}" |
| 114 | + ], |
| 115 | + "tags": ["css", "responsive"], |
| 116 | + "author": "kruimol" |
70 | 117 | } |
71 | 118 | ] |
72 | 119 | }, |
|
0 commit comments