Nikita Litvinenko PHP tööd - TARpv24

Mobiilisõbraliku veebilehe loomise konspekt

Sissejuhatus

Ülesanne: Luua mobiilisõbralik veebileht anekdootidega, mis kohandub automaatselt iga seadme ekraaniga (telefon või arvuti). Ma kasutasin HTML, CSS ja PHP: HTML abil määratlesin lehe struktuuri, CSS abil kujunduse, ning PHP kasutades eraldasin anekdoodid erinevatesse failidesse.

1. Meta Tag

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta> - lehe seadistusi määrav tag, ei kuvata sisule.
name="viewport" - ütleb brauserile, et leht kohandub ekraani laiusega.
content="width=device-width, initial-scale=1.0" - määrab, et lehe laius vastab seadme ekraanile ja algne suurendus on 1.

Tagab, et leht on mobiilil õigesti kuvatud ja CSS media queries töötavad.

2. CSS - @media

@media (max-width: 600px) {
    nav {
        padding: 5px;
        text-align: center;
    }
    
    nav a {
        display: block;
        margin: 5px 0;
        padding: 5px;
        background-color: rgb(77, 87, 98);
    }

    .content {
        margin: 5px;
        padding: 10px;
    }

    .footer {
        margin-top: 10px;
    }
}
@media (max-width: 600px) - stiilid kehtivad ekraanile kuni 600px.

Meediapäring võimaldab lehe kujundust kohandada. Kitsastel ekraanidel vähendatakse paddingut ja marginaale, menüü muutub vertikaalseks ning tekst on loetav. See tagab, et kõik elemendid mahuvad ekraanile ja on kasutajasõbralikud.

Mobiilivaade

Telefonis näeb leht välja järgmiselt:

  • Menüü muutub vertikaalseks, et säästa ruumi.
  • Pildid ja tekst vähenevad või joondatakse ümber.
  • Padding ja marginaalid on väiksemad, et kõik elemendid mahuksid ekraanile.
  • Anekdoodid kuvatakse loetavalt ühe veeruna.
Mobiilivaade
Kass