溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“CSS如何判斷不同分辨率顯示不同寬度”，在日常操作中，相信很多人在CSS如何判斷不同分辨率顯示不同寬度問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS如何判斷不同分辨率顯示不同寬度”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
CSS DIV網頁機關中當分辨率小于即是1024px（像素）時，DIV結構對象展示1000px寬度，當辨別率大于1024px時辰顯現1200px寬度等需求。使用CSS完成篡改閱讀器顯露寬度從而實現構造的網頁寬度消息改變變更（網頁寬度被動隨涉獵器透露表現寬度而變寬變窄）。
隨著發展，愈來愈多的電腦用戶閃現屏區分率越來越高，但有的用戶仍是使用1024px的判別率的浮現屏（依照幾個瀏覽器分辨率統計平臺失掉數據那會使用1200判袂率下列用戶少少，但咱們CSS結構時依舊必要至多思忖1024px區分率用戶），假如網頁結構寬度靜止到1200px，1024判別率用戶瀏覽網頁時閱讀器下方會呈現遷移轉變條，為了方案這個問題，人人可以或許經由運用CSS3樣式判斷用戶涉獵器寬度從而挪用一致機關寬度。
@media screen and (武斷屬性){ CSS名堂決議器 }
這里留意花括號里裝要變換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">CSS5實例：我這個DIV寬度會隨瀏覽器寬度變更哦，嘗嘗篡改閱讀器寬度</div></body></html>4、為了兼容IE9下列版本涉獵器緊要參預一個google的JS，誠然或者下載引人html
<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.谷歌code.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
將JS代碼放入</head>標簽前就可，這里直接引人google在線JS，你可以下載此JS文件重新HTML惹人就可。
5、美滿兼容各大閱讀器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} } /* css 疏解說明：設置裝備擺設了閱讀器寬度不小于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><!--[if lt IE 9]><script src="http://css3-mediaqueries-js.谷歌code.com/svn/trunk/css3-mediaqueries.js"></script><![endif]--></head><body><div class="abc">CSS5實例：我這個DIV寬度會隨涉獵器寬度轉變哦，嘗嘗旋轉閱讀器寬度</div></body></html>到此，關于“CSS如何判斷不同分辨率顯示不同寬度”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
