Adaptive adjustment of web font
Our homepage has been written before, but as an adaptive page, when our page is reduced, in The font size on different devices does not change due to style reasons. It is still the size of the PC font. In order to adapt to the sizes of different devices, we need to judge the size of the page font.
@media:
Using the @media query, you can define different styles for different media types.
@media can set different styles for different screen sizes, especially if you need to set up a responsive page, @media is very useful.
When you reset the browser size, the page will also be re-rendered based on the width and height of the browser.
/*小屏幕 大于等于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;
}
} We have adjusted the size of font paragraphs when the screen resolution is greater than 768px, greater than 992px and greater than 1200px. This is also the reason why in this era, the same web page layout can be displayed appropriately on different devices. When our screen resolutions are different, the font size of my web page will also be different.
Difficulties of this chapter
Set different font sizes for different screen resolutions
@media use
Next Section