Mobiilimalli Konspekt

1. Sissejuhatus

Ülesanne: Teha mobiilisõbralik leht anekdoodide jaoks.

Tehnoloogiad: PHP (anekdoodid), HTML (leht), CSS (kujundus), media queries (mobiil).

2. Koodilõigud

PHP osa - anekdoodid

<?php
$joke_id = isset($_GET['id']) ? (int)$_GET['id'] : 1;

$jokes = [
    1 => "Esimene nali...",
    2 => "Teine nali...",
    3 => "Kolmas nali...",
    4 => "Neljas nali..."
];

$current_joke = isset($jokes[$joke_id]) ? $jokes[$joke_id] : $jokes[1];
?>

See teeb: Valib õige anekdoodi. Kui URL-is on ?id=2, näitab nalja #2.

Menüü loomine

<nav>
    <ul class="menu">
        <?php foreach ($jokes as $id => $joke): ?>
            <li><a href="index.php?leht=mobiilimall/index.php&id=<?php echo $id; ?>">
                Nali #<?php echo $id; ?>
            </a></li>
        <?php endforeach; ?>
    </ul>
</nav>

See teeb: Teeb iga anekdoodi jaoks lingi. Nali #1, Nali #2 jne.

CSS mobiiliks

@media (max-width: 600px) {
    .container {
        padding: 10px;
    }
    
    .menu {
        flex-direction: column;
    }
    
    .menu a {
        text-align: center;
    }
}

See teeb: Muudab lehe mobiilis väiksemaks. Menüü läheb üksteise alla.

Viewport seade

<meta name="viewport" content="width=device-width, initial-scale=1.0">

See teeb: Paneb telefoni lehe õigesti näitama, ei ole liiga väike.

Flexbox menüü jaoks

.menu {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

See teeb: Paneb menüü nupud korralikult paika. Kui ruumi ei jätku, lähevad uuele reale.

3. Mobiilivaade

Ekraanil näeb:

• Menüü on üleval, nupud üksteise all
• Tekst on väiksem, et ära mahuks
• Nupud on suured, et näpuga vajutada saaks
• Pole üleliigset ruumi ääres

Mis muutub mobiilis:

1. Menüü läheb horisontaalist vertikaalseks
2. Fontid muutuvad väiksemaks
3. Nupud muutuvad suuremaks
4. Kõik laius täidab telefoni ekraani