Få en CSS-layout til å overleve ekte innhold

Fire samlinger med CSS-forklaringer for å forstå layoutbegrensninger, spenstig størrelse og de vanskelige tilfellene en perfekt mockup kan skjule.

Et oppsett er ikke ferdig når det samsvarer med ett skjermbilde. Den virkelige testen kommer med en lengre tittel, færre kort, en smal skjerm eller en annen font. Disse forfatterne forklarer CSS gjennom eksempler og visuelle resonnementer. Bruk dem til å undersøke en begrensning du kan reprodusere i stedet for å samle inn erklæringer uten å forstå hva de endrer.

Prøv dette først

Bygg et lite eksempel med en kort tittel, en lang tittel og en ubrutt streng. Endre størrelsen før du endrer CSS. Velg én artikkel som forklarer feilen, bruk den minste relevante ideen, og test på nytt med manglende bilder og zoomet tekst. Hold notater om begrensningen slik at den neste reparasjonen ikke angrer den.

Husk

Eksempler på en artikkel kan være målrettet mot en annen nettleserbaselinje. Sjekk støtten for den spesifikke funksjonen og hold en passende reserve. En kompakt kodebit er ikke automatisk mer spenstig enn en lengre, klarere layoutregel.