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.
WordPress database error: [Table 'yf99682.wp_s6mz6tyggq_comments' doesn't exist]SELECT SQL_CALC_FOUND_ROWS wp_s6mz6tyggq_comments.comment_ID FROM wp_s6mz6tyggq_comments WHERE ( comment_approved = '1' ) AND comment_post_ID = 5683 ORDER BY wp_s6mz6tyggq_comments.comment_date_gmt ASC, wp_s6mz6tyggq_comments.comment_ID ASC