你必須知道的響應(yīng)式布局

時(shí)間：2023-09-23 17:42:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-23 17:42:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

你必須知道的響應(yīng)式布局：

一、前言

響應(yīng)式 Web 設(shè)計(jì)可以讓一個(gè)網(wǎng)站同時(shí)適配多種設(shè)備和多個(gè)屏幕，可以讓網(wǎng)站的布局和功能隨用戶的使用環(huán)境（屏幕大小、輸入方式、設(shè)備/瀏覽器能力）而變化。本文主要介紹一些響應(yīng)式布局容易忽略但又很重要的知識(shí)點(diǎn)。

二、視口

移動(dòng)前端中常說(shuō)的 viewport （視口）就是瀏覽器中用于呈現(xiàn)網(wǎng)頁(yè)的區(qū)域。視口通常并不等于屏幕大小，特別是可以縮放瀏覽器窗口的情況下。手機(jī)端與 PC 端視口存在差異，電腦端的視口寬度等于分辨率，而移動(dòng)端的視口寬度跟分辨率沒有關(guān)系,寬度默認(rèn)值是設(shè)備廠家指定的。iOS, Android 基本都將這個(gè)視口分辨率設(shè)置為 980px。

1.為什么手機(jī)端視口要設(shè)為 980px?

當(dāng)年喬布斯設(shè)想：蘋果手機(jī)如果在市場(chǎng)上火爆了，但是各個(gè)網(wǎng)站還沒有來(lái)得及制作手機(jī)端網(wǎng)頁(yè)，那么用戶不得不用手機(jī)訪問(wèn)電腦版的網(wǎng)頁(yè)，如何用小屏幕訪問(wèn)大屏幕的頁(yè)面也同樣可讀呢？喬幫主就想著為手機(jī)固定一個(gè)視口寬度，讓手機(jī)的視口寬度等于世界上絕大多數(shù) PC 網(wǎng)頁(yè)的版心寬度，就是 980px。這樣，用手機(jī)訪問(wèn)電腦版網(wǎng)頁(yè)的時(shí)候，旁邊剛好沒有留白。不過(guò)頁(yè)面縮放后文字會(huì)變得非常小，用戶需要手動(dòng)放大縮小才能看清楚，體驗(yàn)非常差。

2.約束視口

為了解決前面的問(wèn)題，可以在網(wǎng)頁(yè)的中添加下面這行代碼：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />width=device-width 視口為設(shè)備寬度（就是人設(shè)置的一個(gè)寬度）//不設(shè)置的話默認(rèn)為980pxinitial-scale=1.0 初始化的視口大小是1.0倍maximum-scale=1.0 最大的倍數(shù)是1.0倍user-scalable=0 不允許縮放視口這個(gè)視口的標(biāo)簽告訴瀏覽器怎么渲染網(wǎng)頁(yè)。在這里，標(biāo)簽想表達(dá)的意思是：按照設(shè)備的寬度（device-width）來(lái)渲染網(wǎng)頁(yè)內(nèi)容。事實(shí)上，在支持這個(gè)標(biāo)簽的設(shè)備上給你看一看效果，你就明白了。







不錯(cuò)呀！用戶體驗(yàn)大大改善?。。?此時(shí)如果用 document.documentElement.clientWidth 來(lái)測(cè)試瀏覽器屏幕寬度，你會(huì)發(fā)現(xiàn)當(dāng)前視口寬度等于手機(jī)屏幕的寬度，約數(shù)后的視口寬度都是在 320~480 之間（手機(jī)豎直使用的時(shí)候）。 這個(gè)視口的尺寸，是手機(jī)廠商設(shè)置的，能夠保證我們的文字比如 16px，在自己的這個(gè)視口下清晰、大小剛剛合適。所以大屏幕的手機(jī)的約束視口 > 小屏幕手機(jī)的約束視口。這就能夠保證我們的網(wǎng)頁(yè)可以用 px 寫字號(hào)、寫行高。 需要注意的是：約束之后的視口寬度，不是自己的分辨率??！每個(gè)手機(jī)的分辨率，都要比自己的視口寬度大得多得多！

最最重要的一句話：前端開發(fā)工程師，絲毫不關(guān)心手機(jī)的分辨率，我們只關(guān)心視口。

三、圖片

人們常說(shuō)說(shuō)“一圖勝千言”，確實(shí)如此。我們網(wǎng)頁(yè)中關(guān)于松餅的文字介紹再多，也沒有圖片有吸引力。下面我們就在頁(yè)面上方添加一張松餅的圖片（2000 像素寬），效果類似引誘用戶往下看的大題圖。







哇，真是好大一張圖，它讓整個(gè)網(wǎng)頁(yè)看起來(lái)都失衡了，水平方向上圖片溢出了。不行，必須解決這個(gè)問(wèn)題?？梢杂?CSS 給圖片指定固定寬度，但問(wèn)題是我們想讓它能在不同大小的屏幕中自動(dòng)縮放。比如，我們例子中的 iPhone 屏幕寬度為 320 像素，如果我們把圖片設(shè)置成 320 像素寬，那么 iPhone 屏幕旋轉(zhuǎn)后又怎么辦呢？這時(shí)候 320 像素變成了 480 像素。 解決方案很簡(jiǎn)單，只要一行 CSS 代碼就可以讓圖片隨容器寬度自動(dòng)縮放:

img { max-width: 100%;}回到手機(jī)上，刷新頁(yè)面，結(jié)果比較符合預(yù)期了。 這里聲明 max-width 規(guī)則，就是要保證所有圖片最大顯示為其自身的 100%（即最大只可以顯示為自身那么大）。此時(shí)，如果包含圖片的元素（比如包含圖片的 body 或 div）比圖片固有寬度小，圖片會(huì)縮放占滿最大可用空間。

為什么不用 width:100%?

要實(shí)現(xiàn)圖片的自動(dòng)縮放，也可以使用更通用的 width 屬性，比如 width:100%。然而，這條規(guī)則在這里并不適用。因?yàn)檫@條規(guī)則會(huì)導(dǎo)致它顯示得跟它的容器一樣寬。在容器比圖片寬得多的情況下，圖片會(huì)被無(wú)謂地拉伸。

四、手機(jī)瀏覽器內(nèi)核

在移動(dòng)端，僅有四個(gè)獨(dú)立的瀏覽器內(nèi)核，分別為微軟的 Trident、火狐的 Gecko、開源內(nèi)核 Webkit、Opera 的 Presto。 目前微軟的 Trident 在移動(dòng)終端上主要為 WP7、8 系統(tǒng)內(nèi)置瀏覽器。Opera 的 Presto 內(nèi)核主要為 Opera Mobile、OperaMini、歐朋瀏覽器以及歐朋 HD Beta 版。Webkit 內(nèi)核的適用范圍則較為廣泛，Android 原生瀏覽器、蘋果的 Safari、谷歌 Chrome(Android4.0 使用)都是基于 Webkit 開源內(nèi)核開發(fā)的。

兼容的前綴：1 -ms-2 -moz-3 -o-4 -webkit-中國(guó)用戶的瀏覽器市場(chǎng)份額：







UC、Android 內(nèi)置、Chrome、Safari、QQ Browser 都是 webkit 內(nèi)核，從圖上看占了絕大部分的市場(chǎng)份額。 所以一定要伺候好-webkit-。 有的公司干脆只兼容-webkit-，別的兼容比如-ms-都不寫。

五、流式布局

百分比布局也叫作流式布局、彈性盒布局。手機(jī)網(wǎng)頁(yè)沒有版心，都左右撐滿。

百分比能夠設(shè)置的屬性是 width、height、padding、margin。其他屬性比如 border、font-size 不能用百分比設(shè)置的。

• 如果用百分比寫 width，那么指的是父元素 width 的百分之多少。
• 如果用百分比寫 height，那么指的是父元素 height 的百分之多少。
• 如果用百分比寫 padding，那么指的是父元素 width 的百分之多少，無(wú)論是水平的 padding 還是豎直的 padding。
• 如果用百分比寫 margin，那么指的是父元素 width 的百分之多少，無(wú)論是水平的 margin 還是豎直的 margin。
• 不能用百分比寫 border 的寬度

接下來(lái)我們看一個(gè)例子：

div{ width:200px; height:300px; padding:10px; } div p{ width:50%; height:50%; padding:10%; } /*此時(shí)p的真實(shí)寬度是多少？*/





此時(shí) p 的真實(shí)寬度是 140px*190px

六、媒體查詢

1.為什么響應(yīng)式 Web 設(shè)計(jì)需要媒體查詢

CSS3 媒體查詢可以讓我們針對(duì)特定的設(shè)備能力或條件為網(wǎng)頁(yè)應(yīng)用特定的 CSS 樣式。如果沒有媒體查詢，光用 CSS 是無(wú)法大大修改網(wǎng)頁(yè)外觀的。這個(gè)模塊讓我們可以提前編寫出適應(yīng)很多不可預(yù)測(cè)因素的 CSS 規(guī)則，比如屏幕方向水平或垂直、視口或大或小等等。彈性布局雖然可以讓設(shè)計(jì)適應(yīng)較多場(chǎng)景，也包括某些尺寸的屏幕，但有時(shí)候確實(shí)不夠用，因?yàn)槲覀冞€需要對(duì)布局進(jìn)行更細(xì)致的調(diào)整。媒體查詢讓這一切成為可能，它就相當(dāng)于 CSS 中基本的條件邏輯。

2.媒體查詢語(yǔ)法

我們?cè)诿襟w查詢外面寫的第一條規(guī)則，是“基本的”樣式，它適用于任何設(shè)備。在此基礎(chǔ)上，我們?cè)贋椴煌暱凇⒉煌芰Φ脑O(shè)備，漸進(jìn)增加不同的視覺效果和功能。

body { background-color: grey; }@media screen and (min-width:1200px){ body{ background-color: pink; }} @media screen and (min-width:700px) and (max-width:1200px){ body{ background-color: blue; }}@media screen and (max-width:700px){ body{ background-color: orange; }}其中 @media 就表示媒體查詢，查詢現(xiàn)在看這個(gè)網(wǎng)頁(yè)的設(shè)備是什么，以及它的寬度是多少。screen 表示看這個(gè)網(wǎng)頁(yè)的設(shè)備是顯示器，而不是殘疾人聽力設(shè)備、也不是打印機(jī)。后面用 and 符號(hào)羅列所有的可能性。 值得注意：媒體查詢只能包裹選擇器，不能包裹 k:v 對(duì)兒。

IE6、7、8 不支持媒體查詢，也為了防止手機(jī)端的某些瀏覽器不支持媒體查詢，所以不要把所有的選擇器都放在媒體查詢里面。

七、rem 響應(yīng)式布局

rem 響應(yīng)式布局思想

1. 一般不要給元素設(shè)置具體的寬度,但是對(duì)于一些小圖標(biāo)可以設(shè)定具體寬度值
2. 高度值可以設(shè)置固定值,設(shè)計(jì)稿有多大,我們就嚴(yán)格寫多大
3. 所有設(shè)置的固定值都用 REM 做單位(首先在 HTML 中設(shè)置一個(gè)基準(zhǔn)值：PX 和 REM 的對(duì)應(yīng)比例,然后在效果圖上獲取 PX 值,布局的時(shí)候轉(zhuǎn)化為 REM 值)
4. JS 獲取真實(shí)屏幕的寬度,讓其除以設(shè)計(jì)稿的寬度,算出比例,把之前的基準(zhǔn)值按照比例進(jìn)行重新的設(shè)定,這樣項(xiàng)目就可以在移動(dòng)端自適應(yīng)了

什么是 rem,它與 em 有何區(qū)別

rem:當(dāng)前頁(yè)面中元素的 REM 單位的樣式值都是針對(duì)于 HTML 元素的 font-size 的值進(jìn)行動(dòng)態(tài)計(jì)算的

em:表示父元素的字號(hào)的倍數(shù)。(特例：在 text-indent 屬性中，表示文字寬度)

body →font-size:20px; <div class="box1"> → font-size:2em; box1 <div class="box2"> → font-size:2em; box2 <div class="box3"> → font-size:2em; box3 </div> </div> </div>





em 為單位的時(shí)候，font-size 屬性是計(jì)算后繼承，box1 計(jì)算出來(lái)是 40px。那么里面的 box2繼承的是 40px。em 單位不僅僅可以用來(lái)設(shè)置字號(hào)，還可以設(shè)置任何盒模型的屬性，比如 width、height、padding、margin、border

rem 有一點(diǎn)優(yōu)勢(shì)就是可以和媒體查詢配合，實(shí)現(xiàn)響應(yīng)式布局：

@media screen and (min-width: 320px) { html {font-size: 14px;}}@media screen and (min-width: 360px) { html {font-size: 16px;}}@media screen and (min-width: 400px) { html {font-size: 18px;}}

運(yùn)用場(chǎng)景

如果我們做的 H5 頁(yè)面只在移動(dòng)端訪問(wèn)，這是因?yàn)?REM 不兼容低版本的瀏覽器。而如果移動(dòng)端和 PC 端公用一套代碼，建議使用流式布局。

如何做個(gè) REM 響應(yīng)式布局

1、從 UI 設(shè)計(jì)師拿到 PSD 設(shè)計(jì)稿,然后在樣式中給 HTML 設(shè)定一個(gè) font-size 的值，我們一般都設(shè)置一個(gè)方便后面計(jì)算的值，例如：100px

html{ font-size:100px;//1rem=100px}2、寫頁(yè)面，寫樣式 首先按照設(shè)計(jì)稿的尺寸來(lái)寫樣式，然后在寫樣式值的時(shí)候，需要把得到的像素值除以 100 計(jì)算出對(duì)應(yīng)的 REM 的值。 值得注意的是：真實(shí)項(xiàng)目中外層盒子的寬度我們一般還是不寫固定值，沿用流式布局法的思想，我們用百分比的方式布局

margin:0 0.2rem;height:3rem;3、根據(jù)當(dāng)前屏幕的寬度和設(shè)計(jì)稿的寬度來(lái)計(jì)算我們 HTML 的 font-size 的值 例如：設(shè)計(jì)稿寬度為 640px,其中有一個(gè)部分是輪播圖，它的尺寸是 600*300，在樣式中給 HTML 設(shè)定一個(gè) font-size 的值為 100px,則輪播圖大小應(yīng)該為 6rem×3rem，那如果手機(jī)屏幕寬度為 375px,其 font-size 應(yīng)該設(shè)置為多少。

375/640*100->fontsize=58.59375//此時(shí)輪播圖能自適應(yīng)手機(jī)屏幕大小根據(jù)當(dāng)前屏幕寬度和設(shè)計(jì)稿寬度的比例，動(dòng)態(tài)計(jì)算一下當(dāng)前寬度下的 fontsize 值應(yīng)該是多少，如果 fontsize 的值改變了，之前設(shè)定的所有 REM 單位的值自動(dòng)會(huì)跟著放大或者縮小?？梢酝ㄟ^(guò)以下這段代碼實(shí)現(xiàn)：

<script>~function(){var desW=640,winW=document.documentElement.clientwidth,ratio=winW/desW;document.documentElement.style.fontSize=ratio*100+"px";}();</script>但如果當(dāng)前屏幕寬度大于設(shè)計(jì)稿寬度，圖片會(huì)被拉長(zhǎng)而失真，所以以上代碼需要稍微做些修改：

//html部分<section id="main"><div class="box"></div></section>//js部分<script>~function(){var desW=640,winW=document.documentElement.clientwidth,ratio=winW/desW;var oMain=document.getElementById(main")；if(winW>desW){oMain.style.width=desW+"px";oMain.style.margin="0 auto";return;}document.documentElement.style.fontSize=ratio*100+"px";}();</script>

作者：浪里行舟
鏈接：關(guān)于響應(yīng)式布局，你必須要知道的
來(lái)源：GitHub
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明住處