如何構(gòu)建一個響應(yīng)式網(wǎng)站

時間：2023-08-09 10:15:02 | 來源：網(wǎng)站運營

時間：2023-08-09 10:15:02 來源：網(wǎng)站運營

如何構(gòu)建一個響應(yīng)式網(wǎng)站：

什么是響應(yīng)式web網(wǎng)站

以前我寫網(wǎng)的網(wǎng)頁習(xí)慣的網(wǎng)頁都是定寬的，比如最外層設(shè)置一個寬度為980px的盒子，這是因為那時候的網(wǎng)頁主要顯示在pc端上，而pc端顯示器的大小差異不會特別大。于是固定寬度的樣式寫法成為了流行趨勢。但是隨著移動互聯(lián)網(wǎng)的到來，設(shè)備類型的增多，如智能手機(jī)，平板。那么屏幕大小的差異也就凸顯出來了，如果每一個屏幕設(shè)備寬度寫一個樣式的話，會發(fā)現(xiàn)存在大量重復(fù)的樣式代碼，且工作量會很大，于是我們需要一種減少重復(fù)樣式，讓樣式能夠自動適應(yīng)屏幕的解決方案就出來了："響應(yīng)式"。
我們知道不同的設(shè)備擁有不同屏幕大小即視口(viewport)，那么我們不可能一個樣式適應(yīng)所有的屏幕大小，那么響應(yīng)式解決的就是網(wǎng)站自動去識別不同屏幕，然后去使用對應(yīng)的樣式去適應(yīng)屏幕。

注：“視口”(viewport),指顯示網(wǎng)頁的區(qū)域

響應(yīng)式的核心技術(shù)

1.viewport屬性

為了能夠讓我們的網(wǎng)頁去適應(yīng)屏幕的大小，我們需要添加一個meta屬性

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

• width=device-width：把寬度設(shè)置為設(shè)備寬度（自動適應(yīng)屏幕寬度）
• user-scalable：不允許用戶縮放 （允許用戶縮放視口大小，會增加復(fù)雜度）
• initial-scale=1.0：初始化縮放比例
• minimum-scale=1.0：最小縮放比例

2.媒體查詢

至此我們解決了讓網(wǎng)頁自動適應(yīng)不同的視口大小，但是不同的視口大小要顯示不同的樣式，我們還需要借助媒體查詢來完成。
CSS3規(guī)范分成很多模塊，媒體查詢（3級）只是其中一個模塊。利用媒體查詢，可以根據(jù)設(shè)備的能力應(yīng)用特定的CSS樣式。比如，可以根據(jù)視口寬度、屏幕寬高比和朝向（水平還是垂直）等，只用幾行CSS代碼就改變內(nèi)容的顯示方式。媒體查詢得到了廣泛實現(xiàn)。除了古老的IE（8及以下版本），幾乎所有瀏覽器都支持它。

媒體查詢的語法

說了這么多媒體查詢長什么樣子呢，我們來看一點示例代碼。

div { background:green}@media screen and (min-width:350px){ div { background:red }}@media表示媒體查詢代碼，上面的內(nèi)容含義是，如果是屏幕設(shè)備，并且視口寬度大于等于350px那么就會把div的背景顏色設(shè)置為紅色，由于代碼是由上向下循序解析的，所以，背景色紅色會覆蓋上面的背景色綠色的代碼。

注：因為我們接觸的設(shè)備都是有屏幕的所以screen可以省略

• 在 link 標(biāo)簽中使用媒體查詢

<link rel="style sheet" type="text/css" media="(min-width:350px)" href="index.css">這里會告訴瀏覽器，視口寬度大于等于350px時才加載index.css樣式文件。

• @import 中使用媒體查詢

@import url("base.css") screen and (max-width:350px);css中可以通過import來導(dǎo)入其他的樣式文件，這里告訴瀏覽器視口寬度大于等于350px時才加載base.css樣式文件。

• 在css中使用媒體查詢

@media screen and (min-width:350px){ div { background:red }}這里告訴瀏覽器視口寬度大于等于350px時把div的背景色設(shè)置為紅色。

媒體查詢中支持的屬性

其他媒體查詢最常用的屬性就是min-width和max-width，其他的屬性你可能一輩子都用不上

• width：視口寬度。
• height：視口高度。
• max-width：最大視口寬度
• min-width：最小視口寬度
• device-width：渲染表面的寬度（可以認(rèn)為是設(shè)備屏幕的寬度）。
• device-height：渲染表面的高度（可以認(rèn)為是設(shè)備屏幕的高度）。
• orientation：設(shè)備方向是水平還是垂直。
• aspect-ratio：視口的寬高比。16∶9的寬屏顯示器可以寫成aspect-ratio:16/9。 ? color：顏色組分的位深。比如min-color:16表示設(shè)備至少支持16位深。
• color-index：設(shè)備顏色查找表中的條目數(shù)，值必須是數(shù)值，且不能為負(fù)。
• monochrome：單色幀緩沖中表示每個像素的位數(shù)，值必須是數(shù)值（整數(shù)），比如
  monochrome: 2，且不能為負(fù)。
• resolution：屏幕或打印分辨率，比如min-resolution: 300dpi。也可以接受每厘
  米多少點，比如min-resolution: 118dpcm。 ? scan：針對電視的逐行掃描（progressive）和隔行掃描（interlace）。例如720p HD TV（720p
  中的p表示progressive，即逐行）可以使用scan: progressive來判斷； 而1080i HD TV
  （1080i中的i表示interlace，即隔行）可以使用scan: interlace來判斷。
• grid：設(shè)備基于柵格還是位圖。

3.響應(yīng)式圖片

開發(fā)者不可能知道或預(yù)見瀏覽網(wǎng)站的所有設(shè)備，只有瀏覽器在打開和渲染內(nèi)容時才會知道使用它的設(shè)備的具體情況（屏幕大小、設(shè)備能力等）。另一方面，只有開發(fā)者（你和我）知道自己手里有幾種大小的圖片。比如，我們有同一圖片的三個版本，分別是小、中、大，分別對應(yīng)于相應(yīng)的屏幕大小和分辨率。瀏覽器不知道這些，我們得想辦法讓它知道。
簡言之，難點在于我們知道自己有什么圖片，瀏覽器知道用戶使用什么設(shè)備訪問網(wǎng)站以及最合適的圖片大小和分辨率是多少，兩個關(guān)鍵因素?zé)o法融合。

使用picture元素

<picture> <source media="(min-width: 750px)" srcset="source-medium.jpg"> <source media="(min-width: 350px)" srcset="source-small.jpg"> <img src="source.jpg"> </picture>以上代碼會根據(jù)視口寬度來適應(yīng)使用不同的圖片，如果視口寬度大于等于750px那么使用source-medium.js圖片，否則，如果視口寬度大于等于350px使用source-small.jpg圖片，否則都不滿足條件使用source.jpg圖片。這里source的順序很重要，根據(jù)min-width大小按順序進(jìn)行編寫，相反如果使用max-width就需要倒序編寫。這樣就可以根據(jù)不同大小視口使用不同大小的圖片。

max-width

img { max-width: 100%; }這里聲明max-width，就是要保證所有圖片最大顯示為其自身的100%（即最大只可以顯示為自身那么大）。此時，如果包含圖片的元素（比如包含圖片的body或div）比圖片固有寬度小，圖片會縮放占滿最大可用空間。

為什么不用width:100%?
如果使用width:100%的話那么，圖片的寬度就會是父容器的寬度，如果父容器的寬度大于圖片的真實寬度，那么圖片就會被拉伸變形。而max-width：100%則不會，因為寬度默認(rèn)是auto那么會顯示真實寬度，如果寬度大于父容器寬度，也會等比例縮放到父容器寬度

4.彈性布局

在很早很早之前，網(wǎng)站的寬度大都以百分比形式定義。百分比布局使得網(wǎng)頁寬度能夠隨著查看它們的屏幕窗口大小變化，因而得名彈性布局。后來出現(xiàn)了固定寬度的布局方式，現(xiàn)如今，我們要做響應(yīng)式設(shè)計了，又得回頭撿起彈性布局設(shè)計。相信前端人員都用過flexbox，使用起來也非常的爽，之前垂直居中，瀑布流等寫起來非常痛苦，但flexbox就很方便的解決了這些問題。

前綴

flexbox是css3中的屬性，所以為了兼容各種瀏覽器需要添加各種瀏覽器對應(yīng)的前綴，一下提供自動加前綴的方法：

• 1.使用智能的IDE,如：webstorm，它能夠自動添加前綴
• 2.使用compass
• 3.使用Autoprefixer （https://github.com/postcss/autoprefixer）

主要屬性

• display:flex
  聲明你的盒子是一個flexbox
• flex-direction
  聲明主軸的方向

flex中沒有水平和垂直的說法，只有主軸和側(cè)軸的說法，比如，flex-direction:row，那么你的主軸方向為水平方向，側(cè)軸方向為垂直方向，于是，justify-content: center以主軸方向?qū)R即當(dāng)前為水平方向?qū)R，align-content: center以側(cè)軸方向?qū)R即當(dāng)前為垂直方向?qū)R，flex-direction:clunm反之亦然

• flex-wrap
  主軸方向是否支持換行
• justify-content
  主軸方向?qū)R方式
• align-content
  側(cè)軸方向?qū)R方式
• flex
  子盒子在父盒子中占的比例

舉例：

垂直居中

<style> div{ width: 400px; height: 300px; margin: 200px auto; display: flex; flex-direction: row; //默認(rèn)主軸方向是row即水平方向 flex-wrap: wrap; //允許換行 align-content: center; //設(shè)置側(cè)軸方向居中 background-color: paleturquoise; } p{ width: 100px; height: 100px; line-height: 100px; background-color: rebeccapurple; text-align: center; }</style><div> <p>hello world</p></div>水平偏移

<style> ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: nowrap; /*flex-direction: row-reverse;*/ align-content:center; background-color: deeppink; } li{ width: 100px; height: 50px; text-align: center; line-height: 50px; margin-right: 1px; } li:last-child{ margin-left: auto; }</style><ul> <li>首頁</li> <li>動畫</li> <li>電視劇</li> <li>電影</li> <li>聯(lián)系我們</li></ul>