type="text/css">
					

				

				

					
					

						 @media only screen and (min-width: 480px) {
					

				

				

					
					

						 .col-sm-6, .col-sm-12 {
					

				

				

					
					

						 float: left;
					

				

				

					
					

						 }
					

				

				

					
					

						 .col-sm-12 {
					

				

				

					
					

						 width: 100%;
					

				

				

					
					

						 }
					

				

				

					
					

						 .col-sm-6 {
					

				

				

					
					

						 width: 50%;
					

				

				

					
					

						 }
					

				

				

					
					

						}
					

				

				

					
					

						@media only screen and (min-width: 768px) {
					

				

				

					
					

						 .col-md-6, .col-md-12 {
					

				

				

					
					

						 float: left;
					

				

				

					
					

						 }
					

				

				

					
					

						 .col-md-12 {
					

				

				

					
					

						 width: 100%;
					

				

				

					
					

						 }
					

				

				

					
					

						 .col-md-6 {
					

				

				

					
					

						 width: 50%;
					

				

				

					
					

						 }
					

				

				

					
					

						}
					

				

				

					
					

						
					

				

				

					
					

						 class="container">
					

				

				

					
					

						  class="col-md-12 col-sm-12 row">
					

				

				

					
					

						  class="col-md-6 col-sm-12 col-1 col">
					

				

				

					
					

						 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					

				

				

					
					

						 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
					

				

				

					
					

						 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
					

				

				

					
					

						 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
					

				

				

					
					

						 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
					

				

				

					
					

						 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
					

				

				

					
					

						 
					

				

			

我們簡單解釋一下上述代碼片段 min-width指的是當屏幕尺寸大于當前值的時候樣式生效。外層的 div包裹內(nèi)層的兩個 div。col-md-6col-sm-12當屏幕尺寸大于 768px的時候子 div寬度是父 div的一半，所以是并排。當屏幕尺寸大于 480px的時候子 div寬度和父 div的寬度一樣。下圖為不同尺寸下的效果圖。

768px

480px

注意觀察的同學又發(fā)現(xiàn)問題了，圖二沒有辦法看啊，太小了吧。是的，我們的響應式還沒有做完，這個時候我們在 head里面添加如下一行代碼再試試？那么問題來了，圖一尺寸大于 768px不假，但是也大于 480px啊，那么怎么就按照 768px的尺寸排布了呢？這里就涉及到了 CSS優(yōu)先級：CSS 的基本優(yōu)先級如下 （外部樣式）Externalstyle sheet<（內(nèi)部樣式）Internalstyle sheet<（內(nèi)聯(lián)樣式）Inlinestyle如果優(yōu)先級一樣便有一個覆蓋原則，后面的覆蓋前面的，于是如例，當屏幕尺寸慢慢變大到 768px的時候，后者遍生效了。

   
			

				
				

					
					

						 name="viewport"
					

				

				

					
					

						 content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
					

				

			

神奇的一幕出現(xiàn)了：

width=device-width: 表示此寬度不依賴于原始象素(px)，而依賴于屏幕的寬度.這樣我們就大功告成了.如需要下載源碼請點擊，在線查看請點擊。想知道為什么 meta有這么大作用請翻看下文。

Meta ViewPort 是什么

手機瀏覽器是把頁面放在一個虛擬的“窗口”( viewport)中，通常這個虛擬的“窗口”( viewport)比屏幕寬，默認是把網(wǎng)頁擠到一個很小窗口以便全部預覽，這樣也不會破壞沒有適配手機布局的網(wǎng)頁。移動版的 Safari 瀏覽器最新引進了 viewport 這個 meta tag，讓網(wǎng)頁開發(fā)者來控制 viewport 的大小和縮放，其他手機瀏覽器也逐步支持。我們?nèi)绻隽耸謾C屏幕尺寸的適配就可以手動調(diào)整 viewport，這樣就可以把網(wǎng)頁內(nèi)容和手機布局合理的展示給用戶。下面是具體參數(shù)的說明：

Media Queries 詳解

中文叫做媒體查詢，它包含一個媒體類型(media type)和至少一個表達式，用媒體特性限制樣式表的作用范圍。下面我們直接通過例子對相對的關(guān)鍵字進行分析：

only

用于向早期瀏覽器隱藏媒體查詢，比如IE如果不支持的話直接忽略當前定義的樣式。和其他表達式一起用需要 and

@mediaonly screenand(min-width:400px)

screen

screen是一種 媒體類型，例中的 screen意思是僅支持彩色電腦顯示器。其他屬性如下：all：適用與所有設(shè)備 print：paged material and documents viewed on screen in print previe mode. screen: 彩色電腦顯示器 speech：intended for speech synthesizers

and

and是一種 操作符，表示被鏈接的表達式不許同時滿足，其他表達式如下：and：所有條件必須滿足 ,：只要滿足一種條件即可 not：條件的取反

min-width

min-width是 媒體特征，他的意思是最小寬度滿足的時候就為真，其他媒體特征：

• width: viewport width

• height: viewport height

• aspect-ratio: viewport的寬高比如：16/9

• orientation: 寬度和高度的大小關(guān)系

• resolution: pixel density of the output device

• scan: scanning process of the output device

• grid: is the device a grid or bitmap

• color: number of bits per color component of the output device, or zero if the device isn’t color

• color-index: number of entries in the output device’s color lookup table, or zero if the device does not use such a table

特別推薦一個分享架構(gòu)+算法的優(yōu)質(zhì)內(nèi)容，還沒關(guān)注的小伙伴，可以長按關(guān)注一下：
		

			

長按訂閱更多精彩▼
		

			
如有收獲，點個在看，誠摯感謝
		

免責聲明：本文內(nèi)容由21ic獲得授權(quán)后發(fā)布，版權(quán)歸原作者所有，本平臺僅提供信息存儲服務。文章僅代表作者個人觀點，不代表本平臺立場，如有問題，請聯(lián)系我們，謝謝！