移動端自適應CSS如何根據不同的分辨率顯示不同@media screen 響應式佈局？
下面的文章將介紹如何使用CSS來判斷不同的分辨率，顯示不同的寬度佈局來實現自適應寬度。
有需要的朋友可以參考一下，希望對大家有所幫助。
@media與@media screen打印網頁區別
- 如果css需要用在打印設備裡，那麼就用@media ，否則，就用@media screen。
- 不過這這個也不一定，其實如果把“screen”換為“print”，寫為@media print，那麼該CSS就可用到打印設備上了；
- 但要注意，@media print聲明的css只能在打印設備上有效哦。
1、DIVCSS小案例描述
我們首先設置一個DIV盒子CSS命名為“.abc”，設置其高度為300px，CSS邊框為黑色；
- 以及設置
margin:0 auto佈局居中，預先設置這兩個樣式是為了便於觀察。
我們通過手動拖拽瀏覽器顯示寬度，然後觀察此盒子寬度變化情況：
- 當瀏覽器寬度調節到寬度不大於500px時，對應此盒子寬度顯示100px；
- 調節瀏覽器寬度不大於901px時，顯示“.abc”對應盒子寬度顯示200px;
- 當調節瀏覽器寬度大於1201px時，盒子對象寬度顯示1200px；
- 當小於1200px時候顯示寬度為900px。
2、CSS手機移動端自適應代碼
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 901px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */- 需要注意是CSS代碼順序，由大到小排版CSS（判斷瀏覽器寬度越大越放前）。
- 這樣是因為邏輯關係，@media 判斷CSS排錯將導致判斷失效。
3、HTML代碼
<!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>注意：device-aspect-ratio
- device-aspect-ratio可以用來適配特定屏幕長寬比的設備，這也是一個很有用的屬性。
- 比如，我們的頁面想要對長寬比為4:3的普通屏幕定義一種樣式。
- 然後對於16:9和16:10的寬屏，定義另一種樣式，比如自適應寬度和固定寬度：
- @media only screen and (device-aspect-ratio:4/3)
4、兼容各大瀏覽器HTML+CSS+JS源代碼
<!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}
}
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div class="abc">DIV宽度会随浏览器宽度变化哦，改变浏览器宽度</div>
</body>
</html>以上就是手機移動端自適應CSS，根據不同屏幕顯示不同@media screen響應式的詳細內容。
希望陳溈亮博客（ https://www.chenweiliang.com/ ） 分享的《移動端自適應CSS不同屏幕顯示不同@media screen響應式》，對您有幫助。
歡迎分享本文鏈接：https://www.chenweiliang.com/cwl-2074.html
歡迎加入陳溈亮博客的Telegram 頻道，獲取最新更新！
🔔 率先在頻道置頂目錄獲取寶貴的《ChatGPT 內容行銷AI 工具使用指南》！ 🌟
📚 這份指南蘊含價值巨大，🌟難逢的機遇，切勿錯失良機！ ⏰⌛💨
喜歡就分享和按贊！
您的分享和按贊，是我們持續的動力！
📚 這份指南蘊含價值巨大，🌟難逢的機遇，切勿錯失良機！ ⏰⌛💨
喜歡就分享和按贊！
您的分享和按贊，是我們持續的動力！