Apa yang berubah

Perhatikan kekurangan <meta name="viewport" content="width=device-width, initial-scale=1">, yang melumpuhkan aspek zum tapak dalam peranti mudah alih. Di samping itu, kami menetapkan semula lebar bekas kami dan menukar bar navigasi untuk mengelakkan runtuh, dan pada asasnya bagus untuk digunakan.

Mengenai navbar

Sebagai makluman, komponen navbar agak rumit di sini kerana gaya untuk memaparkannya agak khusus dan terperinci. Gantikan untuk memastikan paparan gaya desktop tidak berprestasi atau anggun seperti yang diingini. Hanya sedar mungkin terdapat potensi gotcha semasa anda membina di atas contoh ini apabila menggunakan navbar.

Pelayar, menatal dan elemen tetap

Reka letak tidak responsif menyerlahkan kelemahan utama kepada elemen tetap. Mana-mana komponen tetap, seperti bar navigasi tetap, tidak akan boleh ditatal apabila port pandangan menjadi lebih sempit daripada kandungan halaman. Dalam erti kata lain, memandangkan lebar bekas tidak responsif 970px dan port pandangan 800px, anda berpotensi menyembunyikan 170px kandungan.

Tidak ada cara untuk mengatasinya kerana ia adalah tingkah laku penyemak imbas lalai. Satu-satunya penyelesaian ialah reka letak responsif atau menggunakan elemen tidak tetap.

Sistem grid tidak responsif

Satu per tiga
Satu per tiga
Satu per tiga