一、據統計,大致共有如何幾種分辨率:
1920*1080
1680*1050
1600*1200/900
1440*900
1400*1050/900
1366*768
1360*1024/768
1280*1024/960/768/720/800/600
1024*768
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>無標題文檔</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* 設置了瀏覽器寬度不小於1201px時 abc 顯示1200px寬度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 設置了瀏覽器寬度不大於1200px時 abc 顯示900px寬度 */
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
/* 設置了瀏覽器寬度不大於900px時 abc 顯示200px寬度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 設置了瀏覽器寬度不大於500px時 abc 顯示100px寬度 */
</style>
</head>
<body>
<div class="abc">DIVCSS5實例:我這個DIV寬度會隨瀏覽器寬度變化哦,試試改變瀏覽器寬度</div>
</body>
</html>