Kandungan halaman utama pembangunan responsif H5 (4)
Pelarasan penyesuaian fon web
Halaman utama kami telah ditulis sebelum ini, tetapi sebagai halaman penyesuaian, apabila halaman kami mengecil, Saiz fon pada peranti berbeza tidak berubah kerana sebab gaya Ia masih saiz fon PC Untuk menyesuaikan dengan saiz peranti yang berbeza, kita perlu menilai saiz fon halaman.
@media:
Menggunakan pertanyaan @media, anda boleh menentukan gaya berbeza untuk jenis media yang berbeza.
@media boleh menetapkan gaya yang berbeza untuk saiz skrin yang berbeza, terutamanya jika anda perlu menyediakan halaman responsif, @media sangat berguna.
Apabila anda menetapkan semula saiz penyemak imbas, halaman itu juga akan dipaparkan semula berdasarkan lebar dan ketinggian penyemak imbas.
/*小屏幕 大于等于768px*/
@media (min-width: 768px) {
.tab-h2{
font-size: 26px;
}
.tab-p{
font-size: 16px;
}
.text h3{
font-size: 22px;
}
.text p{
font-size: 16px;
}
}
/*中等屏幕 大于等于992px*/
@media (min-width: 992px) {
.tab-h2{
font-size: 28px;
}
.tab-p{
font-size: 17px;
}
.text h3{
font-size: 24px;
}
.text p{
font-size: 18px;
}
}
/*大屏幕 大于等于1200px*/
@media (min-width: 1200px) {
.tab-h2{
font-size: 30px;
}
.tab-p{
font-size: 18px;
}
.text h3{
font-size: 26px;
}
.text p{
font-size: 19px;
}
}Kami telah melaraskan saiz perenggan fon apabila resolusi skrin lebih besar daripada 768px, lebih besar daripada 992px dan lebih besar daripada 1200px. Ini juga sebab mengapa dalam era ini, reka letak halaman web yang sama boleh dipaparkan dengan sewajarnya pada peranti yang berbeza Apabila resolusi skrin kami berbeza, saiz fon halaman web saya juga akan berbeza.
Kesukaran bab ini
Tetapkan saiz fon yang berbeza untuk resolusi skrin yang berbeza
@Penggunaan media
