中文字幕vs日韩vs亚洲精品,国模吧无码在线∵,成人公开在线导航网

[導(dǎo)讀]總聽(tīng)別人說(shuō)響應(yīng)式布局，覺(jué)得是一個(gè)很高大上的東西，近日做的一個(gè)項(xiàng)目需要適配不同的屏幕尺寸，于是就簡(jiǎn)單研究了一下 Web響應(yīng)式布局，其實(shí)原理很簡(jiǎn)單，下面就簡(jiǎn)單整理了一下分享給大家。什么是響應(yīng)式布局如圖就是響應(yīng)式布局的體現(xiàn)，簡(jiǎn)單的說(shuō)響應(yīng)式布局就是一

總聽(tīng)別人說(shuō)響應(yīng)式布局，覺(jué)得是一個(gè)很高大上的東西，近日做的一個(gè)項(xiàng)目需要適配不同的屏幕尺寸，于是就簡(jiǎn)單研究了一下 Web響應(yīng)式布局，其實(shí)原理很簡(jiǎn)單，下面就簡(jiǎn)單整理了一下分享給大家。

什么是響應(yīng)式布局

如圖就是響應(yīng)式布局的體現(xiàn)，簡(jiǎn)單的說(shuō)響應(yīng)式布局就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端，而不是為每個(gè)終端做一個(gè)特定的版本。這個(gè)概念隨著移動(dòng)設(shè)備的興起而深入人心。

比如頭條他做的就不是響應(yīng)式布局，他通過(guò)實(shí)時(shí)檢測(cè)設(shè)備信息，在 www.toutiao.com和 m.toutiao.com兩個(gè)網(wǎng)站之間切換。而最近比較火的開(kāi)發(fā)者社區(qū) segmentfault.com就是響應(yīng)式布局，頁(yè)面的布局會(huì)會(huì)隨著你拖動(dòng)瀏覽器窗口大小變化而變化。響應(yīng)式布局沒(méi)有絕對(duì)的話好與壞，需要根據(jù)網(wǎng)站的性質(zhì)來(lái)確定，比如 toutiao的頁(yè)面元素非常多，頁(yè)面需要包括所有屏幕尺寸的樣式顯示不是很好操作，然而 segmentfault頁(yè)面元素較少，反而放在一起方便維護(hù)。

如何快速實(shí)現(xiàn)web響應(yīng)式布局

我們通過(guò)一個(gè)例子來(lái)具體說(shuō)明，首先使用 @media關(guān)鍵字為不同的屏幕尺寸設(shè)置不同樣式，關(guān)于 @media我們下文有更詳細(xì)的介紹

代碼片段：

   
			
				
				
					
					
						 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.

class="col-md-6 col-sm-12 col-2 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.

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

768px

總是聽(tīng)別人說(shuō)響應(yīng)式布局，原來(lái)這么簡(jiǎn)單

480px

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

   
			
				
				
					
					
						 name="viewport"
					

				

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

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

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

Meta ViewPort 是什么

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


width	設(shè)置layout viewport 的寬度，為一個(gè)正整數(shù)，或字符串”width-device”
initial-scale	設(shè)置頁(yè)面的初始縮放值，為一個(gè)數(shù)字，可以帶小數(shù)
minimum-scale	允許用戶的最小縮放值，為一個(gè)數(shù)字，可以帶小數(shù)
maximum-scale	允許用戶的最大縮放值，為一個(gè)數(shù)字，可以帶小數(shù)
height	設(shè)置layout viewport 的高度，這個(gè)屬性對(duì)我們并不重要，很少使用”
user-scalable	是否允許用戶進(jìn)行縮放，值為”no”或”yes”, no 代表不允許，yes代表允許

Media Queries 詳解

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

only

用于向早期瀏覽器隱藏媒體查詢，比如IE如果不支持的話直接忽略當(dāng)前定義的樣式。和其他表達(dá)式一起用需要 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是一種操作符，表示被鏈接的表達(dá)式不許同時(shí)滿足，其他表達(dá)式如下：and：所有條件必須滿足 ,：只要滿足一種條件即可 not：條件的取反

min-width

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

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è)分享架構(gòu)+算法的優(yōu)質(zhì)內(nèi)容，還沒(méi)關(guān)注的小伙伴，可以長(zhǎng)按關(guān)注一下：
		

			

長(zhǎng)按訂閱更多精彩▼
		

			
如有收獲，點(diǎn)個(gè)在看，誠(chéng)摯感謝

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