Mobiilisõbraliku veebilehe loomise konspekt

Minu ülesanne oli luua mobiilisõbralik veebileht anekdootidega. Leht pidi töötama nii telefonis, tahvlis kui ka arvutis ning kohanduma ekraani laiuse järgi automaatselt.

1. Kuidas lahendus töötab

Kasutasin HTML-i, CSS-i ja PHP-d. HTML loob struktuuri, CSS teeb kujunduse ning PHP abil jagasin anekdoodid eraldi failidesse.

Paindlik paigutus

max-width – hoiab sisu keskel ja ei lase tekstil liiga laiaks venida.
flex – paigutab elemendid ilusti ka väiksel ekraanil.
min-width + padding – muudab menüülingid telefonis mugavalt vajutatavaks.

Meediapäringud

Meediapäringud muudavad kujundust vastavalt ekraani suurusele. Näiteks kitsal ekraanil muutub pealkiri väiksemaks.

@media (max-width: 400px) {
    #pais h1 {
        font-size: 1.4em;
    }
}

See muudab teksti paremini loetavaks kõige väiksematel telefonidel.

Koodinäide menüü ja sisu kohta

Kokkuvõte

Leht on tehtud põhimõttega “mobiil ennekõike”. Väike ekraan on esmane ning suuremate ekraanide jaoks lisasin ainult mõned kujunduse täpsustused.

Mobiilivaade

All on näide, kuidas minu anekdoodileht näeb välja telefonis.