Jadikan halaman itu mesra mudah alih?

Question

Saya mempunyai banyak halaman web dan beberapa laman web. Masalahnya, saya seorang pemula. Saya menggunakan html5 dan css3 asas tetapi saya tidak tahu bagaimana untuk menjadikannya skala atas, bawah dan mesra mudah alih. Sebagai contoh, berikut ialah salah satu halaman saya dan salah satu tapak saya di mana anda boleh melihat bahawa ia mempunyai beberapa isu kecil dengan zum masuk dan keluar, dan ia tidak mesra mudah alih sama sekali:

https://mitkovtori.github.io/

https://mitko-vtori-world.github.io/Mitko-Vtori-World/

Jadi, adakah terdapat cara untuk menyelesaikan masalah dengan semua saiz, atau menciptanya semula untuk peranti mudah alih dan lain-lain?

Saya cuba menggunakan peratusan "%" untuk mewakili saiz, contohnya:

<lebar="25%">

Saya juga cuba menggunakan piksel "25px". Hanya nombor "25".

Tetapi tidak kira apa yang saya lakukan, saya sentiasa menghadapi masalah mengezum masuk, keluar dan mengalihkan peranti.

Kod ini adalah 100% sumber terbuka, jadi anda boleh menyemak kod buruk saya dan cuba cari di mana silap saya.

Repositori dua tapak web yang saya kongsi pada mulanya: https://github.com/MitkoVtori/MitkoVtori.github.io

https://github.com/Mitko-Vtori-World/Mitko-Vtori-World

Answer 1

Gunakan pertanyaan media, sebagai contoh, jika anda ingin menggayakan untuk saiz skrin yang lebih rendah daripada 1023px, anda perlu menambah yang berikut di bahagian bawah fail css anda

@media(max-width:1023px){ 
   /* your code will be here */
   .navbar{
        padding: 10px 15px;
    }
}

Kalau nak kurang dari 768, sila buat lagi

@media(max-width:768px){ 
       /* your code will be here */
       .navbar{
            padding: 10px 15px;
        }
    }

Mod serupa untuk skrin besar dan kecil