Ajustement adaptatif des polices Web
Notre page d'accueil a déjà été écrite, mais comme une page adaptative, lorsque notre page rétrécit, la taille de la police sur différents appareils ne change pas pour des raisons de style. Il s'agit toujours de la taille de la police du PC. Afin de s'adapter à la taille des différents appareils, nous devons juger de la taille de la police de la page.
@media :
À l'aide de la requête @media, vous pouvez définir différents styles pour différents types de médias.
@media peut définir différents styles pour différentes tailles d'écran, surtout si vous devez configurer une page réactive, @media est très utile.
Lorsque vous réinitialisez la taille du navigateur, la page sera également restituée en fonction de la largeur et de la hauteur du navigateur.
/*小屏幕 大于等于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;
}
}Nous avons ajusté la taille des paragraphes de police lorsque la résolution de l'écran est supérieure à 768px, supérieure à 992px et supérieure à 1200px. C'est également la raison pour laquelle, à notre époque, la même mise en page Web peut être affichée de manière appropriée sur différents appareils. Lorsque nos résolutions d'écran sont différentes, la taille de la police de ma page Web sera également différente.
Difficultés de ce chapitre
Définir différentes tailles de police pour différentes résolutions d'écran
@media Utiliser
section suivante