设计网页响应式 - 查询媒体
Apa itu media query?
Media query adalah teknologi CSS yang diperkenalkan dalam CSS3.
Hanya digunakan jika memenuhi syarat khusus @media Peraturan untuk merujuk ke blok sifat CSS.
实例
Jika tetingkap pelayar adalah 600px atau kurang, warna latar belakang seharusnya adalah biru pucat:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Tambahkan titik patah
Di awal tutorial ini, kami membuat halaman web yang mengandungi baris dan baris, tetapi halaman ber responsi ini kelihatan buruk di skrin kecil.
Media query boleh membantu anda. Kita boleh menambahkan titik patah di mana beberapa bahagian rancangan akan bertindak berbeza di setiap sisi titik patah.
Komputer meja
Peralatan paksi
Tambahkan titik patah di 768px menggunakan media query:
实例
Ketika skrin (tetingkap pelayar) kurang daripada 768px, lebar setiap baris seharusnya 100%:
/* Untuk perangkat meja: */
.col-1 {lebar: 8.33%;}
.col-2 {lebar: 16.66%;}
.col-3 {lebar: 25%;}
.col-4 {lebar: 33.33%;}
.col-5 {lebar: 41.66%;}
.col-6 {lebar: 50%;}
.col-7 {lebar: 58.33%;}
.col-8 {lebar: 66.66%;}
.col-9 {lebar: 75%;}
.col-10 {lebar: 83.33%;}
.col-11 {lebar: 91.66%;}
.col-12 {lebar: 100%;}
@media only screen and (max-width: 768px) {
/* Untuk ponsel: */
[class*="col-"] {
lebar: 100%;
}
}
Sentiasa rancangan utama paksi
Mobile First (utama paksi) merujuk kepada rancangan untuk perangkat paksi sebelum merancang untuk komputer meja atau mana-mana perangkat lain (ini akan membuat halaman tampil lebih cepat di perangkat yang kecil).
Artinya, kita harus membuat beberapa peningkatan dalam CSS.
Ketika lebar kurang daripada 768px, kami seharusnya mengubah rancangan, bukannya mengubah lebar. Kita begitu lakukan rancangan 'utama paksi' (mobile first):
实例
/* Untuk ponsel: */
[class*="col-"] {
lebar: 100%;
}
@media only screen and (min-width: 768px) {
/* Untuk desktop: */
.col-1 {lebar: 8.33%;}
.col-2 {lebar: 16.66%;}
.col-3 {lebar: 25%;}
.col-4 {lebar: 33.33%;}
.col-5 {lebar: 41.66%;}
.col-6 {lebar: 50%;}
.col-7 {lebar: 58.33%;}
.col-8 {lebar: 66.66%;}
.col-9 {lebar: 75%;}
.col-10 {lebar: 83.33%;}
.col-11 {lebar: 91.66%;}
.col-12 {lebar: 100%;}
}
Titik patah lainnya
Anda boleh menambahkan sebanyak-banyaknya titik patah.
Kami juga akan memasukkan titik patah antara tablet dan paksi.
Komputer meja
Tablet
Peralatan paksi
Untuk ini, kami menambahkan media query (pada 600 paksi), dan menambahkan kumpulan kelas baru untuk perangkat yang lebih besar daripada 600 paksi (tetapi kurang daripada 768 paksi):
实例
Perhatikan, kedua kumpulan kelas hampir sama, perbezaannya hanya nama (col- dan col-s-):
/* Untuk ponsel: */
[class*="col-"] {
lebar: 100%;
}
@media only screen and (min-width: 600px) {
/* Untuk tablet: */
.col-s-1 {lebar: 8.33%;}
.col-s-2 {lebar: 16.66%;}
.col-s-3 {lebar: 25%;}
.col-s-4 {lebar: 33.33%;}
.col-s-5 {lebar: 41.66%;}
.col-s-6 {lebar: 50%;}
.col-s-7 {lebar: 58.33%;}
.col-s-8 {lebar: 66.66%;}
.col-s-9 {lebar: 75%;}
.col-s-10 {lebar: 83.33%;}
.col-s-11 {lebar: 91.66%;}
.col-s-12 {lebar: 100%;}
}
@media only screen and (min-width: 768px) {
/* Untuk desktop: */
.col-1 {lebar: 8.33%;}
.col-2 {lebar: 16.66%;}
.col-3 {lebar: 25%;}
.col-4 {lebar: 33.33%;}
.col-5 {lebar: 41.66%;}
.col-6 {lebar: 50%;}
.col-7 {lebar: 58.33%;}
.col-8 {lebar: 66.66%;}
.col-9 {lebar: 75%;}
.col-10 {lebar: 83.33%;}
.col-11 {lebar: 91.66%;}
.col-12 {lebar: 100%;}
}
Ada dua kumpulan kelas yang sama terasa aneh, tetapi ia memberikan kesempatan bagi kami untuk menggunakan HTML untuk menentukan apa yang terjadi terhadap lajur di setiap batasan:
Contoh HTML
Untuk komputer meja:
Bagian pertama dan ketiga akan melintasi 3 lajur. Bagian tengah akan melintasi 6 lajur.
Untuk tablet:
部分 pertama akan melintasi 3 lajur, bagian kedua akan melintasi 9 lajur, bagian ketiga akan ditampilkan di bawah bagian pertama dan kedua, dan akan melintasi 12 lajur:
<div class="row"> <div class="col-3 col-s-3">...</div> <div class="col-6 col-s-9">...</div> <div class="col-3 col-s-12">...</div> </div>
Titik pemotongan perangkat tipikal
Ada banyak layar dan perangkat dengan tinggi dan lebar yang berbeda, sehingga sulit untuk membuat titik pemotongan yang tepat untuk setiap perangkat. Untuk keperluan sederhana, Anda dapat menargetkan lima kelompok ini:
实例
/* Perangkat kecil ekstra (telepon, 600px dan di bawah) */
@media only screen and (max-width: 600px) {...}
/* Perangkat kecil (tablet vertikal dan handphone besar, 600 piksel dan di atas) */
@media only screen and (min-width: 600px) {...}
/* Perangkat menengah (tablet horizontal, 768 piksel dan di atas) */
@media only screen and (min-width: 768px) {...}
/* Perangkat besar (laptop dan desktop, 992px dan di atas) */
@media only screen and (min-width: 992px) {...}
/* Perangkat super besar (laptop besar dan desktop, 1200px dan di atas) */
@media only screen and (min-width: 1200px) {...}
Orientasi: Potret / Lanskap
Media query juga dapat digunakan untuk mengubah tata letak halaman berdasarkan arah browser.
Anda dapat menetapkan suatu kelompok properti CSS, yang hanya berlaku saat lebar jendela browser lebih besar daripada tingginya, yang disebut arah 'horizontal':
实例
jika orientasi mode horizontal (landscape mode), latar belakang halaman akan berwarna biru muda:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
Mengsembunyikan elemen dengan media query
Penggunaan yang biasa lain dari media query adalah menyembunyikan elemen di berbagai ukuran layar:
实例
/* jika ukuran layar 600 piksel atau lebih kecil, sembunyikan elemen ini */
@media only screen and (max-width: 600px) {
div.example {
display: none;
}
}
Mengubah ukuran huruf dengan media query
Anda juga dapat menggunakan media query untuk mengubah ukuran huruf elemen pada berbagai ukuran layar:
实例
/* jika ukuran layar 601px atau lebih besar, atur font-size <div> menjadi 80px */
@media only screen and (min-width: 601px) {}}
div.example {
font-size: 80px;
}
}
/* 如果屏幕尺寸为 600px 或更小，请将 <div> 的 font-size 设置为 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
参考手册 @media CSS
完整概述所有媒体类型和特性/表达式，请参阅 规则 @media 参考手册中参阅 CSS.
