If you want to apply different css on the browser of a mobile device to complete your responsive desin, there are two methods:
Method 1:
Add the @ media tag to the css file, as shown in figure
@ Media screen and (min-width: 481px)
{
/* Apply the style if the width is greater than 481 */
......
}
@ Media screen and (max-width: 480px)
{
/* Apply the style when the width is less than 480 */
......
}
Other common css attributes are placed outside.
Method 2:
Specify different css in the
<Head>
<Title> </title>
<Link href = "test1.css" rel = "stylesheet" type = "text/css"/>
<Link href = "mobile.css" rel = "stylesheet" media = "screen and (max-width: 768px)" type = "text/css"/>
</Head>
When the browser width is less than px, mobile.css will be used, otherwise the previous one will be used.
After testing, the following statements are incorrect and will be loaded.
The main difference between the two methods is that the performance of the latter method is better. Resources in mobile.css will not be loaded if they do not meet the conditions, and the former will be loaded in both cases.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
