When media queries are developed on the mobile terminal, it is an effective way to handle page compatibility. A media query consists of an optional media type and zero or more expressions that use media functions to limit the scope of the style sheet, such as width, height, and color.
The media query contains an optional media type and media feature expression (0 or more) that will eventually be parsed as true or false. If the media type specified in the media query matches the device type used to display the document, and all expressions have true values, then the result of the media query is true.
Today, I will share a pit that I stepped on during the development of the project.
When some information is displayed on the mobile terminal, because the screen size of the mobile terminal is different, it is necessary to solve these problems. The most commonly used is to use the relevant attributes of the screen in the css media query.
If there is a problem with the display of the page in Apple 5 and Apple X, use the attributes related to the media screen to write the following code
< div> The code is very simple, but it is particularly practical and can solve many style compatibility issues.
@media screen and (min-width: 300px) {
/*The style when the screen width is 300 to 330px*/
. fontSizeB {
font-size: 18px;
padding-top: 11%;
}
}
< p>@media screen and (min-width: 330px) {
/*The style when the screen width is greater than 330*/
.fontSizeB {
font -size: 20px;
padding-top: 11%;
}
}
The code is very simple, but very practical, Can solve many style compatibility issues.
Friends who want to know more can go to the official MDN documentation (https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries) to learn.