| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Mobile first scalable design design with media queries</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <section> | |
| <article> | |
| <h2>Hallo Wereld</h2> Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet hic recusandae quas impedit perferendis rerum consectetur magni reprehenderit nam, sapiente iusto commodi cum, consequatur ex optio. Excepturi atque quasi voluptatum? | |
| </article> | |
| <article> | |
| <h2>Hallo Wereld</h2> Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet hic recusandae quas impedit perferendis rerum consectetur magni reprehenderit nam, sapiente iusto commodi cum, consequatur ex optio. Excepturi atque quasi voluptatum? | |
| </article> | |
| <article> | |
| <h2>Hallo Wereld</h2> Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet hic recusandae quas impedit perferendis rerum consectetur magni reprehenderit nam, sapiente iusto commodi cum, consequatur ex optio. Excepturi atque quasi voluptatum? | |
| </article> | |
| <article> | |
| <h2>Hallo Wereld</h2> Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet hic recusandae quas impedit perferendis rerum consectetur magni reprehenderit nam, sapiente iusto commodi cum, consequatur ex optio. Excepturi atque quasi voluptatum? | |
| </article> | |
| </section> | |
| </body> | |
| </html> |
Example of how to scale a layout from mobile to desktop (and larger) by figuring out when the layout "breaks" when resizing, and then placing your css media queries strategically. Note also the clever use of REM measurements for margins and paddings, relative to the global font-size! Preview: at bl.ocks.org
Edit / Play around with it for yourself in Plunker! > See link below: https://plnkr.co/edit/gist:b98556c9eedd735e79a4af043835f909
| /*TIP 1: Eerst plaats je alle CSS styling die "standaard" gaat gelden voor alle elementen (standaard daar bedoel ik mee in feite van 0px schermbreedte tot oneindig breed) daarna maak ik het scherm zo klein mogelijk en begin dan, terwijl ik het LANGZAAM groter maak, te ontdekken waar voor mij het design "breekt". En voor DIE "breekpunten" maak ik de CSS media queries met "alternatieve" styling! Die media queries vind je onderaan deze CSS file! */ | |
| /** ---------------------------------------------------------------------- // | |
| * @group: STANDAARD CSS | |
| */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html { | |
| background: lightgrey; | |
| font-size: 12px; | |
| font-family: sans-serif; | |
| } | |
| section { | |
| display: grid; | |
| grid-gap: 2rem; | |
| margin: 5rem; | |
| } | |
| article { | |
| background: white; | |
| padding: 2rem 2rem 4rem 2rem; | |
| box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); | |
| } | |
| h2 { | |
| font-size: 2.5rem; | |
| } | |
| article:nth-child(odd) { | |
| transform: rotate(6deg); | |
| } | |
| /** ---------------------------------------------------------------------- // | |
| * @group: VANAF HIER MEDIA QUERIES | |
| */ | |
| @media (min-width: 630px) { | |
| section { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| html { | |
| font-size: 12px; | |
| } | |
| } | |
| /* TIP 3: Hier een media query om de artikeltjes rood te maken: en dat alleen VAN 630px TOT 730px schermbreedte :-) */ | |
| @media (min-width: 630px) and (max-width: 730px) { | |
| article { | |
| background: red; | |
| color: white; | |
| } | |
| } | |
| /* TIP 4: hier een media query om VANAF 960px vier kolommen naast elkaar te hebben. Ook laat ik nu handig alle artikelen nu verschaald "opblazen" tot oneindig. Op een TV in de woonkamer komt de site er dan zo uit te zien :-) | |
| Kun je ook ontdekken waarom ik dat voor elkaar heb gekregen door alleen maar 1.2vw op te geven voor de font grootte? */ | |
| @media (min-width: 960px) { | |
| section { | |
| grid-template-columns: 1fr 1fr 1fr 1fr; | |
| } | |
| html { | |
| font-size: 1.2vw; | |
| } | |
| } | |