Penggunaan Min-width dan Max-width Media Queries CSS

min-width dan max-width media queries CSS

Pertanyaan yang sering muncul dalam pikiran saya adalah:

Apakah saya harus menggunakan min-width atau max-width pada media queries?

Jawaban yang jelas adalah tentu saja, “ya”. Tapi apakah Anda tahu apa yang mereka minta diantara min-width dan max-width yang lebih baik?

Mereka adalah bagian utama untuk desain responsif, ahh…. mungkin itu adalaha pertanyaan aneh, dan Anda akan tahu bahwa jawabannya adalah “tergantung”. Tetapi dilihat dari banyak implementasi pada desain responsif, itu jelas bagi saya bahwa banyak desainer dan pengembang merasa tidak cukup yakin. Dan saya senang untuk berbagi pendapat saya sendiri mengenai jawaban saya yaitu “tergantung” berarti mengenai pertanyaan khusus ini. Maka dari itu mungkin bisa menjawab pertanyaan mengenai bagaimana “Penggunaan Min-width dan Max-width Media Queries CSS” yang tepat.

Desktop pertama dan max-width

Ada banyak jumlah desainer/pengembang yang masih memikirkan penggunaan “desktop” sebagai manifestasi desain utama mereka, dengan ukuran yang lain (umumnya lebih kecil) sebagai sekunder, sering kali hal ini muncul sebagai renungan saja, karena akan ada petunjuk visual yang signifikan atas jumlah usaha yang telah melewati pada ukuran layar yang lainnya jika dibandingkan dengan tampilan desktop mereka. Seringkali, ketika seseorang meneliti CSS dari situs tersebut, max-width adalah fitur media pilihan.

Ya, ini masuk akal juga. Jika desain desktop pertama dibangun, maka semua CSS untuk versi desktop dari desain telah selesai dibangun, dan harus diganti dengan CSS yang lebih untuk setiap breakpoints lainnya. Jika lebar desktop yang diberikan adalah dasar kami dan kami tidak mau atau tidak akan melakukan refactor pada CSS kami, maka tampaknya akan sangat logis untuk mengesampingkan apa yang sekarang ada pada CSS dasar kami untuk semua lebar viewport dengan CSS yang berlaku untuk ukuran lebar yang lebih kecil(responsif).

Tutorial lainya   7 Tips untuk Mempercepat Webiste

Ini adalah contoh saya dalam penggunaan min-width dan max-width media queries CSS:

Contoh di atas banyak yang perlu dihilangkan, tapi aku yakin Anda akan mendapatkan ide dari hal tersebut. Pendekatan ini, bila digunakan lebih dari sekelompok komponen, Anda dapat menentukan dan meningkatkan jumlah CSS yang dibutuhkan untuk menyelesaikan proyek atau bisa disebut dengan Optimasi CSS. Tetapi masalah utama adalah apakah hal itu masuk akal?, karena ketika setelah mencakup fakta unsur block-level bernilai 100% dari induk mereka secara default, maka berikut ini jauh lebih masuk akal jika dibandingkan dengan kode di atas:

Di sini, kita memanfaatkan keadaan default elemen blok-level, dan mengesampingkan mereka ketika mereka perlu mengubah nilai dari default. Sekali lagi, mungkin tampak jelas bagi beberapa pembaca, tapi tidak mengambil dan melihat sumber dari banyak situs sebelum Anda memahami mengapa saya mengklarifikasi hal ini.

Menggunakan max-width atas keputusan Anda lebih baik

Ada beberapa alasan mengapa, bahkan ketika Anda tahu hal itu lebih baik, Anda mungkin sengaja memilih untuk menggunakan pendekatan yang sama untuk max-width pendekatan di atas:

  1. Anda seorang pengembang dan Anda menerima tawaran dengan tampilan desktop saja, desktop pertama, atau ukuran lainnya hanya(responsif) sebagai renungan Anda dari desainer. Bagaimana Anda bisa tahu? Jika Anda hanya merancang atau menerima desain untuk lebar desktop saja, ini adalah apa yang akan Anda hadapi. Jika Anda punya rincian bagus mengenai desain desktop dengan beberapa tampilan “mobile” atau “tablet” contoh dilemparkan di sana, ini adalah apa yang Anda hadapi. Dalam kasus ini, mungkin penggunaan max-width itu sangat diperlukan, kecuali Anda memiliki anggaran atau jadwal yang memungkinkan Anda untuk me-refactor struktur CSS selama pengembangan proyek Anda.
  2. Anda membuat sebuah situs responsif dan lengkap dengan struktur CSS merupakan bagian desain Anda telah mewarisi dan tidak bisa berubah, untuk alasan apa pun.
  3. Anda mengkompensasi untuk kenyataan bahwa saat ini kami tidak memiliki media queries CSS, dan Anda akan menangani ini dengan CSS bukan menggunakan polyfill JavaScript untuk spesifikasi yang tidak ada.
Tutorial lainya   Membuat Website Responsive Tanpa Coding

Jadi, apa yang terbaik untuk digunakan?

Berikut penjelasan saya “tergantung” untuk pertanyaan khusus ini. Dan ingat, itu hanya pendapat saya sendiri berdasarkan pengalaman saya sendiri karena melihat tampilan default dari unsur tertentu. Jika Anda harus mengganti default ini untuk layar yang lebih kecil, gunakan max-width. Jika default dapat digunakan pada layar kecil, menggunakan min-width, dan hanya jika sebagian elemen mungkin akan menyimpang sedikit dari default. Dan tentu saja, saya sarankan biarkanlah konten menentukan apa yang terjadi.

Sebuah contoh yang baik menggunakan max-width untuk mengesampingkan tampilan default sebuah elemen, sehingga hal tersebut akan bekerja lebih baik pada layar yang lebih kecil adalah ketika menggunakan tabel. Bayangkan sebuah tabel yang berisi terlalu banyak konten untuk menampilkan dalam bentuk default pada layar kecil. Salah satu pendekatan mungkin bisa Anda lakukan seperti contoh di bawah ini:

Tutorial lainya   Membuat Breadcrumbs tanpa Plugin pada Wordpress

Hal ini ternyata, setiap baris (dan sel) menjadi blok pada layar sempit. Tabel dapat menjadi cukup panjang dan berbentuk vertikal dan melakukan penambahan style pada CSS biasanya diperlukan, tetapi hal ini sering lebih baik daripada bolak-balik dan menggunakan scrol horisontal yang lain akan diperlukan untuk membaca konten.

Dalam hal ini, itu membuat semua rasa di dunia untuk meninggalkan Tabel dalam bentuk default, kecuali di browser yang memahami permintaan media dan di mana layar tidak lebih besar dari ukuran yang digunakan, dalam hal ini adalah ukuran 30em.

Unsur-unsur lain (saya berani mengatakan kebanyakan unsur-unsur lain) yang memiliki default yang bekerja dengan baik pada layar yang lebih kecil, hanya perlu mengubah bila diperlukan pada besar layar; menggunakan min-width merupakan pilihan yang tepat.

Singkatnya: biarkan default elemen membantu menentukan fitur media yang digunakan dalam query media Anda. Mungkin ini saja yang saya sampaikan mengenai “Penggunaan Min-width dan Max-width Media Queries CSS” semoga bermanfaat.

Penulis Tutorial

Penulis Tutorial

Kata terindah

Satu komentar pada "Penggunaan Min-width dan Max-width Media Queries CSS"

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *