本篇內(nèi)容介紹了“怎么用CSS創(chuàng)建響應(yīng)式布局”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

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

現(xiàn)如今在Web前端領(lǐng)域，BootStrap是一個最流行的UI庫，其12列的柵欄系統(tǒng)為響應(yīng)式布局提供了一種對程序員來說很好操作的模式。

追究Bootstrap的內(nèi)在原理，其實就是通過媒體查詢來完成對不同屏幕大小、不同分辨率、不同設(shè)備導致的不同場景下的Css樣式的選擇。今天我就對媒體查詢這一工具或者說方法來進行一個總結(jié)。

從 CSS 版本 2 開始，就可以通過媒體類型在 CSS 中獲得媒體支持。

1、如何使用媒體查詢：

XML/HTML Code復制內(nèi)容到剪貼板

以上的兩句引入Css樣式表的語句，比一般的Css引入語句就多了一個關(guān)鍵字“media”，media 屬性定義了應(yīng)該用于指定每種媒體類型的樣式表：

•screen 適用于計算機彩色屏幕。
•print 適用于打印預(yù)覽模式下查看的內(nèi)容或者打印機打印的內(nèi)容。
*這里是將media屬性放在了Css引入的語句中，所以在以下查詢語句中就可以省略screen或者print。

2、一般的媒體查詢語法：

XML/HTML Code復制內(nèi)容到剪貼板

1. @media “media type” condition {/*CSS樣式表*/}其中“@media”也可以有另一中寫法，“media=”；   

2.   

“media type”是應(yīng)用媒體查詢的媒體類型，例如“all”，意思是所有媒體都使用接下來的css樣式表；或者“(min-width:800px)”，意思是屏幕最小寬度為800px時使用接下來的CSS樣式表，如果屏幕寬度大于800px則不會應(yīng)用此CSS。

也就是說，媒體查詢包含一個媒體類型，后跟一個或多個檢查特定條件（如最小的屏幕寬度）的表達式。通過評估條件的真假，如果改條件為true則應(yīng)用Css，否則不應(yīng)用。

由此我們可以擴展出很多的媒體查詢類型。

3、在Css的媒體查詢中，可以使用三種邏輯運算，也即“and”，“or”，“not”，意思我當然不用解釋。舉幾個例子一眼就明白了：

CSS Code復制內(nèi)容到剪貼板

1. /*在將某個媒體查詢應(yīng)用于所有媒體類型時，會省略 all*/  

2. @media (min-width:800px) { ... }   

3. /*寬度在800~1200px之間時激活*/  

4. @media (min-width:800px) and (max-width:1200px) { ... }   

5. /*可以使用多個and運算符，這里添加了第三個判斷方向為縱向*/  

6. @media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }   

7. /*寬度為800px或者方向為縱向時激活*/  

8. @media (min-width:800px) or (orientation:portrait) { ... }   

9. /*寬度不是800px時激活*/  

10. @media (not min-width:800px) { ... }  

4、寬度和高度非常相似，所以二者的條件可以在一起使用：

@media (min-width:800px) and (min-height:400px) { ... }orientation查詢：

@media (orientation:portrait) { ... }不帶max-或min-的查詢，當然這種查詢的的可用性不是很大：

@media (width:800px) and (height:400px) { ... }

5、常見媒體查詢

因為 Apple 首次向市場推出了用戶智能手機和平板電腦產(chǎn)品，所以下列大多數(shù)媒體查詢都是基于這些型號的設(shè)備。

如果目標是橫向模式智能手機，則使用： @media (min-width: 321px) { ... }

如果目標是縱向模式智能手機，則使用： @media (max-width: 320px) { ... }

如果目標是橫向模式 Apple iPad，則使用： @media (orientation: landscape) { ... }

如果目標是縱向模式 iPad，則使用： @media (orientation: portrait) { ... }

您可能已經(jīng)注意到了，iPad 上使用的是 orientation 媒體特性，而 width 用于 Apple iPhone 之上。主要是因為 iPhone 不支持orientation 媒體特性。您必須使用 width 模擬這些方向斷點。

6、嵌套的媒體查詢：

XML/HTML Code復制內(nèi)容到剪貼板

1. #header {   

2.   width: 400px;   

3.   @media (min-width: 800px) {   

4.     width: 100%;   

5.   }   

6. }  

以上代碼編譯后為以下的結(jié)果：

XML/HTML Code復制內(nèi)容到剪貼板

1. #header {   

2.   width: 400px;   

3. }   

4. @media (min-width: 800px) {   

5.   #header {   

6.     width: 100%;   

7.   }   

8. }  

以上以寬度為例來對媒體查詢進行一個小結(jié)， 管中窺豹，可見一斑。width和height只是兩種可以用媒體查詢來進行控制的屬性，還有顏色（color）、顏色索引（integer）、寬高比（ratio）等屬性都是也可以使用的。

“怎么用CSS創(chuàng)建響應(yīng)式布局”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！