Mobillimallid Konspekt
Minu ülesanne oli leida veebilehe kujundusmall, mis on "responsiivne" ja töötab nii arvutis kui ka mobiiltelefonides. Siin selgitan, kuidas see töötab.
Responsiveness tähendab, et leht kohandub automaatselt igale ekraanisuurusele (telefon, tahvelarvuti, arvuti).
Paindlikud Mõõdud ja Paigutus
Meie CSS kasutab fikseeritud suuruste asemel paindlikke lahendusi:
- Maksimaalne laius (max-width: 600px): See hoiab sisu lauaarvutis kenasti keskel ja ei lase sel liiga laiaks venida. Mobiilis täidab sisu automaatselt ekraani.
- Flexbox (display: flex): See paigutus juhib lehe peamisi osi. See on võtmeks, et hoida jalus (#footer) alati lehe allservas.
- Puutepinnad (padding ja min-width): Menüülingid on tehtud piisavalt suurteks, et neid oleks telefoniekraanil lihtne näpuga vajutada.
Meediapäringud
@media on reegel, mis ütleb CSS-ile: "Kui ekraan on nii lai, kasuta neid uusi stiile." See laseb meil muuta lehe välimust kindla ekraanisuuruse jaoks.
@media (min-width: 640px) { ... }
See rakendub tahvelarvutites ja arvutites. Annab sisu ümber rohkem vaba ruumi (suurem polsterdus ja veeris), muutes teksti lugemise mugavamaks.
@media (max-width: 400px) { ... }
See rakendub kõige kitsamatel telefoniekraanidel. Näiteks teeb see pealkirja (#header h1) veidi väiksemaks, et see mahuks kitsale alale mugavalt ära.
Kokkuvõtteks
Meie disain on ehitatud põhimõttel "mobiil ennekõike": kõigepealt teeme lehe telefonile sobivaks ja seejärel lisame meediapäringutega detailid suurematele ekraanidele.
Pildi Näide
Minu Anekdoodikogu disain töötab ka telefoniekraanidel.
