CSS如何判斷不同分辨率顯示不同寬度

這篇文章主要介紹“CSS如何判斷不同分辨率顯示不同寬度”，在日常操作中，相信很多人在CSS如何判斷不同分辨率顯示不同寬度問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS如何判斷不同分辨率顯示不同寬度”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

在天津等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供網(wǎng)站制作、成都網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作按需策劃,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),營銷型網(wǎng)站建設(shè),成都外貿(mào)網(wǎng)站制作,天津網(wǎng)站建設(shè)費(fèi)用合理。

一、適用畛域描述

CSS DIV網(wǎng)頁機(jī)關(guān)中當(dāng)分辨率小于即是1024px（像素）時(shí)，DIV結(jié)構(gòu)對象展示1000px寬度，當(dāng)辨別率大于1024px時(shí)辰顯現(xiàn)1200px寬度等需求。使用CSS完成篡改閱讀器顯露寬度從而實(shí)現(xiàn)構(gòu)造的網(wǎng)頁寬度消息改變變更（網(wǎng)頁寬度被動隨涉獵器透露表現(xiàn)寬度而變寬變窄）。

隨著發(fā)展，愈來愈多的電腦用戶閃現(xiàn)屏區(qū)分率越來越高，但有的用戶仍是使用1024px的判別率的浮現(xiàn)屏（依照幾個(gè)瀏覽器分辨率統(tǒng)計(jì)平臺失掉數(shù)據(jù)那會使用1200判袂率下列用戶少少，但咱們CSS結(jié)構(gòu)時(shí)依舊必要至多思忖1024px區(qū)分率用戶），假如網(wǎng)頁結(jié)構(gòu)寬度靜止到1200px，1024判別率用戶瀏覽網(wǎng)頁時(shí)閱讀器下方會呈現(xiàn)遷移轉(zhuǎn)變條，為了方案這個(gè)問題，人人可以或許經(jīng)由運(yùn)用CSS3樣式判斷用戶涉獵器寬度從而挪用一致機(jī)關(guān)寬度。

二、應(yīng)用CSS單詞與語法

@media screen and (武斷屬性){ CSS名堂決議器 }

這里留意花括號里裝要變換CSS款式選擇器。

三、不合鑒識率顯示差別寬度花式案例

1、DIVCSS小案例形容
我們起首設(shè)置一個(gè)DIV盒子CSS命名為“.abc”，配置其高度為300px，css邊框?yàn)樾?；以及設(shè)置裝備擺設(shè)margin:0 auto機(jī)關(guān)居中。起先配置這兩個(gè)花色是為了便于視察。

我們經(jīng)由過程手動拖拽瀏覽器顯露寬度，此后觀測此盒子寬度變換狀況，當(dāng)瀏覽器寬度調(diào)治到寬度不大于500px時(shí)，對應(yīng)此盒子寬度顯露100px；調(diào)節(jié)閱讀器寬度不大于901px時(shí)，表示“.abc”對應(yīng)盒子寬度展示200px;當(dāng)調(diào)理涉獵器寬度大于1201px時(shí)，盒子對象寬度顯示1200px；當(dāng)小于1200px時(shí)辰閃現(xiàn)寬度為900px。

2、CSS代碼

.abc{ height:300px; border:1px solid #000; margin:0 auto} @media screen and (min-width: 1201px) { .abc {width: 1200px}  } /* css表述：設(shè)置裝備擺設(shè)了涉獵器寬度不小于1201px時(shí) abc 體現(xiàn)1200px寬度 */  @media screen and (max-width: 1200px) { .abc {width: 900px}  } /* 設(shè)置了閱讀器寬度不大于1200px時(shí) abc 透露表現(xiàn)900px寬度 */  @media screen and (max-width: 901px) { .abc {width: 200px;}  } /* 配置了涉獵器寬度不大于901px時(shí) abc 顯現(xiàn)200px寬度 */  @media screen and (max-width: 500px) { .abc {width: 100px;}  }

  1. /* 配置了瀏覽器寬度不大于500px時(shí) abc 展現(xiàn)100px寬度 */ 

需要寄望是CSS代碼步伐，由大到小排版CSS（判斷閱讀器寬度越大越放前），多么是因?yàn)檫壿嫺上?，@media 判斷CSS排錯將導(dǎo)致判斷起效。

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}  } /* 設(shè)置裝備擺設(shè)了閱讀器寬度不小于1201px時(shí) abc 展現(xiàn)1200px寬度 */  @media screen and (max-width: 1200px) { .abc {width: 900px}  } /* 設(shè)置了涉獵器寬度不大于1200px時(shí) abc 顯示900px寬度 */  @media screen and (max-width: 900px) { .abc {width: 200px;}  } /* 設(shè)置裝備擺設(shè)了閱讀器寬度不大于900px時(shí) abc 體現(xiàn)200px寬度 */  @media screen and (max-width: 500px) { .abc {width: 100px;}  } /* 設(shè)置裝備擺設(shè)了閱讀器寬度不大于500px時(shí) abc 表示100px寬度 */  </style></head><body><div class="abc">CSS5實(shí)例：我這個(gè)DIV寬度會隨瀏覽器寬度變更哦，嘗嘗篡改閱讀器寬度</div></body></html>

4、為了兼容IE9下列版本涉獵器緊要參預(yù)一個(gè)google的JS，誠然或者下載引人html

<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.谷歌code.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->

將JS代碼放入</head>標(biāo)簽前就可，這里直接引人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 疏解說明：設(shè)置裝備擺設(shè)了閱讀器寬度不小于1201px時(shí) abc 顯現(xiàn)1200px寬度 */  @media screen and (max-width: 1200px) { .abc {width: 900px}  } /* 設(shè)置裝備擺設(shè)了涉獵器寬度不大于1200px時(shí) abc 表示900px寬度 */  @media screen and (max-width: 900px) { .abc {width: 200px;}  } /* 配置了涉獵器寬度不大于900px時(shí) abc 表現(xiàn)200px寬度 */  @media screen and (max-width: 500px) { .abc {width: 100px;}  } /* 設(shè)置了涉獵器寬度不大于500px時(shí) abc 透露表現(xiàn)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實(shí)例：我這個(gè)DIV寬度會隨涉獵器寬度轉(zhuǎn)變哦，嘗嘗旋轉(zhuǎn)閱讀器寬度</div></body></html>

到此，關(guān)于“CSS如何判斷不同分辨率顯示不同寬度”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

文章題目：CSS如何判斷不同分辨率顯示不同寬度
URL分享：http://muchs.cn/article36/ihcepg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站建設(shè)、虛擬主機(jī)、企業(yè)網(wǎng)站制作、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

營銷型網(wǎng)站建設(shè)