Începem cu jocul cu modulul nostru de postare pe blog, jucând cu spațierea. Adăugăm și micul pătrat colorat din stânga sus a modulului, un semnificator vizual al tipului de conținut care este.
Următoarea modificare pe care o facem este de a reduce unele dintre golurile exterioare la dimensiuni mai mici de ecran. Pe ecranele largi, conținutul are o lățime de 80% (margini cu lățime de 10%), dar este mai bine să mergeți mai mult ca 90% pe ecrane mai mici (margini cu lățime de 5%).
Adăugăm o mică tranziție pentru momentul în care apare acea interogare media, care poate fi un truc de designer-y foarte distractiv. Îmi place în acest videoclip, dar în cele din urmă acest lucru a fost retras din design. Poate deveni agitat atunci când există mult mai mult conținut pe pagină și mai degrabă distrage atenția.
Ne modificăm sistemul de rețea pentru a avea un punct de întrerupere la cea mai mică dimensiune. Este foarte ușor, nu mai facem decât să plutim coloanele și să le facem width: 100%;Yay pentru a nu supra-gândi grilele! Ne luptăm cu unele probleme de specificitate pe drum.
Deschidem simulatorul iOS real pentru a verifica grila care funcționează pe un dispozitiv mobil „real”. Ne luptăm puțin să găsim metaeticheta corectă, dar în cele din urmă ne înșurăm cu cea corectă de pe CSS-Tricks.com. Functioneaza! Dar, desigur, avem câteva probleme de poziționare pe care va trebui să le rezolvăm. Pentru înregistrare, metaeticheta respectivă este:
Ridicăm răsunăți răsunăți cu spațierea și dimensionarea până când lucrurile arată bine. Lucrurile arată destul de bine până la final!