Web desain responsif - pertanyaan media
Media (Media) telah memperkenalkan query pada CSS3: CSS3 pertanyaan @media .
Gunakan pertanyaan @media, Anda dapat menentukan gaya yang berbeda untuk jenis media yang berbeda.
contoh
Jika jendela browser lebih kecil dari 500px, latar belakang akan berubah menjadi biru muda:
body {
background-color: lightblue;
}
}
Coba »
Menambahkan breakpoint
Pada tutorial sebelumnya kita menggunakan baris dan kolom untuk membuat halaman web, itu adalah responsif, tapi di layar kecil dan tidak menunjukkan ramah.
pertanyaan media dapat membantu kita memecahkan masalah ini. Kita dapat menambahkan breakpoint di tengah draft desain, breakpoints yang berbeda memiliki efek yang berbeda.
Desktop
perangkat mobile
Gunakan pertanyaan media 768px menambahkan breakpoints:
contoh
Ketika layar (jendela browser) kurang dari 768px, lebar setiap kolom adalah 100%:
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
Coba »
Prioritas untuk desain terminal mobile
Prioritas berarti desktop end bergerak dan perangkat lain yang dirancang untuk mengutamakan desain terminal mobile.
Ini berarti bahwa kita harus membuat beberapa perubahan pada CSS.
Kami layar kurang dari 768px perubahan gaya perlu dimodifikasi dengan gaya yang sama ketika layar lebih lebar dari 768px. Berikut ini adalah contoh dari prioritas akhir seluler:
[Class * = "col"] {
width: 100%;
}
@media hanya layar dan (min-width : 768px) {
/ * Untuk Desktop: * /
.col-1 {width: 8,33% ;}
.col-2 {width: 16,66% ;}
.col-3 {width: 25% ;}
.col-4 {width: 33,33% ;}
.col-5 {width: 41,66% ;}
.col-6 {width: 50% ;}
.col-7 {width: 58,33% ;}
.col-8 {width: 66,66% ;}
.col-9 {width: 75% ;}
.col-10 {width: 83,33% ;}
.col-11 {width: 91,66% ;}
.col-12 {width: 100% ;}
}
breakpoints lainnya
Anda dapat menambahkan breakpoint sesuai dengan kebutuhan mereka.
Kami juga dapat perangkat tablet dan ponsel mengatur breakpoints.
Desktop
tablet
perangkat mobile
600px layar saat menambahkan query media, dan mengatur gaya baru (tapi kurang dari layar lebih besar dari 600px 768px):
contoh
Perhatikan bahwa dua gaya kelas yang sama, tetapi nama yang berbeda (col dan col-m-):
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 { width: 8.33%; }
.col-m-2 { width: 16.66%; }
.col-m-3 { width: 25%; }
.col-m-4 { width: 33.33%; }
.col-m-5 { width: 41.66%; }
.col-m-6 { width: 50%; }
.col-m-7 { width: 58.33%; }
.col-m-8 { width: 66.66%; }
.col-m-9 { width: 75%; }
.col-m-10 { width: 83.33%; }
.col-m-11 { width: 91.66%; }
.col-m-12 { width: 100%; }
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }
}
Coba »
Kode di atas terlihat lebih dari banyak, tapi dia dapat diatur secara otomatis sesuai dengan ukuran layar gaya yang berbeda, sehingga masih sangat diperlukan.
Contoh HTML
Untuk desktop:
Bagian pertama dan ketiga mencakup tiga. porsi menengah lintas domain 6.
Untuk perangkat tablet:
Pertama lintas-domain 3, bagian kedua mencakup 9, bagian ketiga dari lintas-domain 12:
<Class Div = "col-3 col-m-3"> ... </ div>
<Class Div = "col-6 col-m-9"> ... </ div>
<Class Div = "col-3 col-m-12"> ... </ div>
</ Div>
Arah: layar horizontal / vertikal layar
Dikombinasikan dengan kueri media CSS, Anda dapat membuat beradaptasi dengan orientasi yang berbeda dari perangkat (landscape landscape, portrait portrait, dll) tata letak.
sintaks:
orientation：portrait | landscape
- potret: sebutkan perangkat output di daerah tampak dari halaman ketinggian lebih besar dari atau sama dengan lebar
- lanskap: nilai kondisi antar potret lanskap
contoh
Jika latar belakang layar vertikal akan biru muda:
body {
background-color: lightblue;
}
}
Coba »