Sesuaikan Situs Web Anda agar Sesuai dengan Semua Resolusi

Saat mendesain situs web, salah satu hal terpenting yang perlu diingat adalah memastikan bahwa halaman Anda muncul dengan benar di seluruh layar dan perangkat dari semua ukuran. Ini dapat dilakukan dengan memasukkan baris kode ke halaman Anda yang menentukan lebar relatif halaman atau dengan memberikan nilai resolusi minimum dan maksimum.

Artikel singkat ini akan memberi Anda tips tentang cara memastikan bahwa situs web Anda ditampilkan dengan benar di layar semua ukuran .

Sesuaikan Situs Web Anda Sesuai Semua Layar

Menentukan lebar relatif sebuah halaman adalah metode yang disarankan ketika datang ke desain halaman web karena kemampuan halaman untuk menyesuaikan dengan layar ukuran apa pun. Dengan menentukan lebar dalam persentase sebagai lawan dari nomor unit, Anda membangun sejumlah fleksibilitas untuk setiap bagian halaman, yang memungkinkannya untuk tumbuh atau menyusut berdasarkan spesifikasi layar pemirsa.

Definisi lebar relatif situs web dilakukan melalui tag tubuh . Tag ini dapat disesuaikan jika Anda menggunakan div # body :

 body {width: 100%;} 

Dalam contoh ini, kode menentukan bahwa halaman situs web Anda akan mengambil 100% dari jendela, terlepas dari ukuran layar tampilan. Jika Anda ingin halaman Anda terlihat sedikit lebih kecil, kami sarankan untuk mengatur lebar Anda tidak kurang dari 80%, atau Anda berisiko konten Anda akan muncul terlalu kecil di layar. Jika Anda menentukan lebar yang lebih kecil, Anda dapat memfokuskan layar Anda menggunakan margin: otomatis .

Properti Lebar Minimum atau Maksimum

Properti lebar minimum atau maksimum juga dapat digunakan saat menyesuaikan situs web agar sesuai dengan semua jenis resolusi. Penting untuk dicatat, bagaimanapun, bahwa lebar minimum tidak didukung di Internet Explorer, dan bahwa pengaturan lebar maksimum dapat mengakibatkan presentasi terdistorsi jika halaman yang lebih kecil tidak sesuai dengan layar yang lebih besar.

Berikut adalah contoh situs web yang menunjukkan lebar halaman 90%, terpusat, dengan lebar minimum 600 piksel dan lebar maksimum 2000 piksel:

 tubuh {lebar: 90%; margin: otomatis; lebar minimum: 600px; lebar maksimum: 2000px}