Media Queries Cara menargetkan desktop, tablet, dan ponsel

Situs web ini menggunakan layanan keamanan untuk melindungi dirinya dari serangan online. Tindakan yang baru saja Anda lakukan memicu solusi keamanan. Ada beberapa tindakan yang dapat memicu blok ini termasuk mengirimkan kata atau frasa tertentu, perintah SQL atau data yang cacat.

Apa yang bisa saya lakukan untuk menyelesaikan ini?

Daftar perangkat lunak desain web desktop yang responsif dan lainnya

kueri media adalah fitur CSS yang mengaktifkan konten halaman web untuk beradaptasi dengan ukuran dan resolusi layar yang berbeda. Mereka adalah bagian mendasar dari desain web responsif dan digunakan untuk menyesuaikan tampilan situs web untuk beberapa perangkat.

Kueri media di atas diaktifkan jika jendela browser pengguna memiliki lebar 768 piksel atau kurang. Ini bisa terjadi jika Anda mengecilkan jendela Anda di komputer desktop atau jika Anda menggunakan perangkat seluler, seperti tablet, untuk melihat halaman web.

Ketika kami awalnya duduk untuk membahas fitur untuk kesalahan, Anda dapat membayangkan kata-kata "bug, tiket, tonggak, prioritas" dilemparkan ke sana. Dan Anda akan benar. Tetapi di luar fungsi mana yang kami bangun menjadi kesalahan kami ingin memastikan bahwa kegunaannya sama baiknya dengan fitur yang ditetapkan. Tidak hanya pada desktop, tetapi pada berbagai perangkat yang berbeda.

"desain responsif" adalah dua kata lain yang terus muncul. Pergunakan seluler dari web adalah tren yang meningkat dan kami memutuskan untuk merangkul ini dengan memberikan desain agnostik perangkat. Dalam istilah orang awam ini berarti bahwa apakah Anda memeriksa kesalahan di desktop Anda, iPad atau ponsel cerdas Anda, konten dikirimkan kepada Anda dengan cara yang intuitif dan sesuai.

jadi bagaimana itu dilakukan? Dengan sedikit mengamap dari kueri media CSS3. Pertanyaan media telah menarik banyak perhatian baru-baru ini, sangat banyak sehingga kami sudah mulai melihat galeri desain web yang responsif muncul.

Permintaan media adalah potongan kode sederhana, ditempatkan di header situs web atau stylesheet tujuannya adalah untuk mendeteksi informasi yang berbeda tentang pengguna, dan memberikan stylesheet tertentu berdasarkan informasi itu. Ada beberapa fitur media yang berbeda yang bisa kita tanyakan tetapi yang paling penting bagi kita adalah lebar, lebar browser yaitu. Dengan mencari tahu lebar saat ini dari browser pengguna, kami dapat membuat asumsi yang berpendidikan tentang perangkat mana yang mereka gunakan. Misalnya:

Bagaimana? Seperti yang saya sebutkan pertanyaan media sebelumnya dapat dimasukkan dalam header halaman (jika Anda ingin memisahkan stylesheet Anda per perangkat) atau langsung dalam stylesheet utama. Karena kesalahan adalah tema yang sangat besar, kami memilih untuk membuat stylesheet terpisah untuk setiap perangkat. Kode itu sendiri sangat mudah:

Stylesheet pertama adalah default dan semua gaya utama ditempatkan di sini. Ini ditujukan untuk resolusi antara 1024 — 768 dan 1280 — 1024. Dua resolusi paling populer saat ini. Yang kedua adalah untuk tampilan layar lebar modern dan akan dikirimkan kepada pengguna yang lebar resolusi layarnya lebih besar dari 1212px. Yang ketiga adalah untuk tablet dan viewports dengan resolusi lebar antara 768px dan 991px.

dengan stylesheet spesifik yang disiapkan untuk berbagai perangkat, hal berikutnya yang harus dilakukan adalah memastikan lebar elemen pembungkus utama Anda sesuai untuk perangkat tersebut. Cara termudah dan paling semantik untuk melakukan ini adalah dengan menggunakan tag tubuh. Sebagai contoh cepat (saya tidak ingin membuat Anda bosan dengan kode tanpa akhir), di dalam file handheld-potret.css Anda akan memasukkan sesuatu di sepanjang baris:

Mudah-mudahan yang mencakup dasar-dasar kueri media dan akan membantu Anda mengatur desain responsif. Komentar terakhir yang saya tinggalkan adalah dengan hati-hati dengan teknik ini. Sangat mudah untuk jatuh ke dalam perangkap dengan asumsi bahwa pengguna smartphone terburu-buru karena itu tidak tertarik pada fitur X. Saya menggunakan istilah "perangkat desain agnostik" di awal artikel ini dan itu yang saya lebih suka "desain responsif". Situs web Anda harus memberikan fungsionalitas yang identik di seluruh perangkat, kueri media hanya memungkinkan kami untuk mengoptimalkan bagaimana fungsi itu dikirim.

Kueri Media Desain Web Responsif

Contoh responsif html.

Kueri Media Desain Web Responsif
Kami menggunakan cookie
Kami menggunakan cookie untuk memastikan bahwa kami memberi Anda pengalaman terbaik di situs web kami. Dengan menggunakan situs web, Anda menyetujui penggunaan cookie kami.
Izinkan cookie