As one of the methods of responsive layout, media queries are also widely used in practical projects. But do you really know how to use it?
For example, the following matches iphone6/7/8 screens
@media screen and (max -width: 375px){ /* CSS code */ }
Generally written like this, it refers to the width of the webview. Similarly, setting the root node according to the clientWidth is the fontsize, which is also the width of the referenced webview.
If it is placed on a PC or in the default full-screen H5 of a mobile phone, there is no problem in writing it like this.
However, mixed development, nesting H5 pages in the webview of the app, has a problem with responsive layout.
The specific usage scenarios are as follows:
App even the rich text message type in the chat software comes from H5. That is to say
The webview (browser) width of this message type is not equal to the device screen width. Therefore, the responsive layout of this H5 page cannot set the root node according to js and then use rem to layout.
Mobile responsive layouts always refer to the width of the hardware device! Mobile responsive layouts always refer to the width of the hardware device! Mobile responsive layouts always refer to the width of the hardware device!
Therefore, here only media queries can be used to set the font size of the root node. Again, back to media queries.
@media screen and (min-device-width: 320px) and(max-device-width:359px){html{font-size:13.65px;}}
@media screen and (min-device-width: 360px) and(max-device-width:374px){html{font-size:15.36px;}}
@media screen and (min-device-width: 375px) and(max-device-width:399px){html{font-size:16px;}}
What's the difference at the very beginning of the root? That's right
The difference between device-width and width.
Typically, mobile devices use device-width; for "PC device" users use max-width.
So, figure this out, and you're really using media queries.