One, according to statistics, roughly common how several resolutions:
1920*1080
1680*1050
1600*1200/900
1440*900
1400*1050/900
1366*768
1360*1024/768
1280*1024/960/768/720/800/600
1024x768
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title> Untitled Document </title>
<style>
. abc{height:300px; border:1px solid #000; margin:0 Auto}
@media screen and (min-width:1201px) {
. ABC {width:1200px}
}
/* Set the width of the browser to 1201px when the viewer is not less than 1200px */
@media screen and (max-width:1200px) {
. ABC {width:900px}
}
/* Set the width of the browser to 1200px when the viewer is not wider than 900px */
@media screen and (max-width:900px) {
. abc {width:200px;}
}
/* Set the width of the browser to 900px when the viewer is not wider than 200px */
@media screen and (max-width:500px) {
. abc {width:100px;}
}
/* Set the width of the browser to 500px when the viewer is not wider than 100px */
</style>
<body>
<div class= "ABC" >divcss5 Example: my div width will vary with the width of the browser Oh, try changing the browser width </div>
</body>
How is the page adaptive at different resolutions?
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
