不同分辨率下,頁面如何自適應?


一、據統計,大致共有如何幾種分辨率:

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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM