什么是響應(yīng)？響應(yīng)頁(yè)面在不同的屏幕上具有不同的布局，換句話(huà)說(shuō)，使用相同的html在不同分辨率下的不同排版。如下圖所示：

響應(yīng)式布局是解決適應(yīng)性問(wèn)題。傳統(tǒng)的開(kāi)發(fā)方法是開(kāi)發(fā)一套PC，并開(kāi)發(fā)一套手機(jī)，并且只要你開(kāi)發(fā)一套就使用響應(yīng)式布局。因?yàn)樗褂孟嗤膆tml，所以它的JS邏輯交互只需要編寫(xiě)一個(gè)集合。缺點(diǎn)是CSS很重。傳統(tǒng)的移動(dòng)電話(huà)適配器有三種常見(jiàn)的解決方案。第二是使用全球rem。首先，根據(jù)屏幕，1rem等于px的數(shù)量，然后將html標(biāo)簽的font-size設(shè)置為rem。屏幕越大，字體大小越大，然后頁(yè)面元素的寬度和高度以及字體大小由rem縮放。第三個(gè)是阿里的彈性盒子。該方案類(lèi)似于第二種方案。頁(yè)面內(nèi)容的字體大小是使用的px而不是縮放的rem。還需要引入框架。第三個(gè)應(yīng)該比第二個(gè)更合理，因?yàn)橹魑谋镜淖煮w通常是14px或16px。如果這個(gè)手機(jī)的一個(gè)頁(yè)面是15.5px而另一個(gè)頁(yè)面是14.9px，這可能有點(diǎn)奇怪。響應(yīng)式布局的使用不需要轉(zhuǎn)換rem。讓我們逐步分析上面的例子中的響應(yīng)性。 1.在白色

的兩側(cè)設(shè)置不同的分辨率頁(yè)面 第一頁(yè)的正文內(nèi)容具有較大的寬度。當(dāng)屏幕超過(guò)該寬度時(shí)，中間體的內(nèi)容很大，以至于它不會(huì)變大，也就是說(shuō)，它將被固定到一個(gè)大的寬度，然后居中，如大。它是1080px。然后，當(dāng)它大于1024px時(shí)，頁(yè)面主體的內(nèi)容為960px，并且兩邊自動(dòng)保持白色;兩者之間的差距是500px到500px之間的500px;當(dāng)它小于500px時(shí)，它被認(rèn)為是手機(jī)，并且雙方被20px白化。所以計(jì)算一下，容器代碼如下：

總的想法是留下空白是合適的，不要留太多，導(dǎo)致中間內(nèi)容過(guò)于狹窄，并且不能使中間的內(nèi)容過(guò)大。這實(shí)際上與引導(dǎo)容器的想法一致，但您可能必須根據(jù)您自己的業(yè)務(wù)特征，用戶(hù)群等制作不同的美白策略.2。屏幕變小，一個(gè)變窄，另一個(gè)不變;

當(dāng)屏幕變小或?yàn)g覽器窗口被拉下時(shí)，中間內(nèi)容的寬度不能保持在1080px，它必須更小，并且在變小的過(guò)程中，它通常保持不變而另一邊變窄與頁(yè)面，如下所示。顯示：

右側(cè)的結(jié)果欄寬度保持不變，左側(cè)的表單欄寬度減小。因?yàn)橛覀?cè)不容易看到，如果右側(cè)變窄，那么字體應(yīng)該相應(yīng)減少，字體尺寸減小，右側(cè)的白色空間變得太大，所以它不漂亮，所以你只能站在正確的位置。策略是縮小左邊的內(nèi)容。這種場(chǎng)景更為常見(jiàn)。如果它是右側(cè)的化身，則無(wú)法減少。一旦它的高度減小，它就會(huì)減少，導(dǎo)致上下空間，所以這種情況不能移動(dòng)。 3.保持中間空白并縮小內(nèi)容寬度

左欄的寬度應(yīng)該如何變?。恳粋€(gè)原則是保持兩者之間的間距固定，兩側(cè)內(nèi)容的寬度相應(yīng)減小，如下圖所示：

所以有必要使用CSS3的calc，如下圖所示：123input {width: calc（（100％-20px）/2）} calc兼容性IE10及以上支持，android 4及以下版本不支持，所以考慮到不支持該設(shè)備可以輕松兼容，如下面的代碼所示：1234input {width: 48％; width: calc（（100％-20px）/2）;}如果你不支持calc，使用48％，所以差別不是很大不是很精確。如果您真的需要它，您可以編寫(xiě)更多媒體查詢(xún)以變得更加精確。 4.左右布局成為上下布局。當(dāng)屏幕拉得很小時(shí)，左列的縮小非常小。如果它更小，則不會(huì)協(xié)調(diào)。因此，這次，左右布局應(yīng)該更改為上下布局。把它放在下面。因?yàn)橛覀?cè)列是大屏幕上的浮點(diǎn):它會(huì)覆蓋中間屏幕中的浮動(dòng)屬性并變?yōu)楦↑c(diǎn):無(wú)。原始右欄有四條線，相對(duì)較短。您可以考慮將它下面的三條線連續(xù)放置，也就是讓它們浮動(dòng)。如下面的代碼所示：123456789101112131415.cal-result {float: right; width: 330px;} 1個(gè)media（max-width: 800px）{。cal-result {float: none; width: 100％;}。cal-result .result {float: left; width: 33％;}}

讓每個(gè)結(jié)果取1/3，然后浮動(dòng)，效果如下：

5.當(dāng)寬度太小時(shí)，換行自動(dòng)，特別是當(dāng)內(nèi)容為列表ul的形式時(shí)，不能放置的li應(yīng)自動(dòng)更改為下一行。當(dāng)然，您也可以手動(dòng)控制它，如下所示：1234567891011 media（max-width: 800px）{。result {width: 33％;}} 1個(gè)media（max-width: 400px）{。result {width: 50％在屏幕上當(dāng)寬度小于400時(shí)，每個(gè)結(jié)果都是50％，因此它排列成兩行。這也是一種常見(jiàn)的方法，但在我們的例子中，如果數(shù)量很小，它仍然在iPhone 6 375px屏幕上排名，如果它可以在一行中保持相對(duì)漂亮。并且固定50％，如果有數(shù)量相對(duì)較大時(shí)有可能重疊，有一種方法可以做到這一點(diǎn)不是寫(xiě)死區(qū)寬度，而是將死區(qū)最小寬度寫(xiě)入50％，所以當(dāng)內(nèi)容相對(duì)較長(zhǎng)，浮動(dòng)元素如果同一條線不適合，它會(huì)自動(dòng)換行。但眾所周知的仍然是一種使其根據(jù)內(nèi)容的長(zhǎng)度自動(dòng)換行的方法，當(dāng)然，你可以使用JS計(jì)算，但是有點(diǎn)麻煩。這時(shí)flex派上用場(chǎng)，非常簡(jiǎn)單，只需設(shè)置兩個(gè)屬性：12345.result-container {display: flex; justify-content: space-between; flex-wrap: wrap;}

Space-between允許子元素以相等的間隔放置在容器的兩側(cè)，而wrap屬性使子元素自動(dòng)換行。當(dāng)容器不夠?qū)挄r(shí)，可以實(shí)現(xiàn)以下效果：

還有一個(gè)小問(wèn)題，就是當(dāng)內(nèi)容剛剛滿(mǎn)時(shí)，兩個(gè)項(xiàng)目之間沒(méi)有空格，如下所示：

這是放在一起的，因?yàn)閒lex的間距不能指定一個(gè)小的空間，所以只能通過(guò)margin或padding方法，比如添加margin-right：123.result: not（: last-child）{margin- Right: 10px ;}

效果如下：

這比堅(jiān)持在一起更好。當(dāng)從大屏幕變?yōu)樾∑聊粫r(shí)，一些字體大小主要是字體大小，標(biāo)題的間距應(yīng)相應(yīng)調(diào)整。這個(gè)小小的改變是一個(gè)步驟改變，而不是像rem這樣的連續(xù)改變，而這種梯子一般只有兩個(gè)足夠，一個(gè)大屏幕，一個(gè)小屏幕。如果你需要做很多階梯，那么你的排版可能會(huì)有問(wèn)題。 6.使用響應(yīng)式圖像（如相同的標(biāo)題圖像），您需要在計(jì)算機(jī)上使用大圖像，但在手機(jī)上使用小圖像，否則會(huì)導(dǎo)致手機(jī)上流量浪費(fèi)較慢，一種方法是使用背景-image組合媒體查詢(xún)?nèi)缦拢?234567.banner {background-image: url（/static/large.jpg）;} media（max-width: 500px）{background-image: url（/static/small.jpg這個(gè)方法的缺點(diǎn)是它對(duì)SEO不是很友好，因?yàn)槿绻闶褂胕mg標(biāo)簽?zāi)阋部梢詫?xiě)一個(gè)alt屬性。第二種常用方法是使用img的srcset或圖片標(biāo)記作為響應(yīng)圖片。這在《Effective前端7：加快頁(yè)面打開(kāi)速度》中提到，這里不再重復(fù)。除了大小屏幕，這種響應(yīng)圖片還可以考慮屏幕的屏幕，即dpr是2或更多，正常屏幕dpr的屏幕是1，即屏幕高dpr使用圖片的2倍，而普通dp的屏幕使用1次。數(shù)字。 7.其他問(wèn)題涉及某些地方大屏幕和小屏幕布局的差異。例如，當(dāng)屏幕較大時(shí)，某些內(nèi)容會(huì)被打碎，而小屏幕則很遠(yuǎn)。此時(shí)，您可能需要重復(fù)html并寫(xiě)入兩個(gè)標(biāo)簽。隱藏屏幕時(shí)，隱藏小屏幕的html標(biāo)簽，當(dāng)屏幕較小時(shí)，隱藏大屏幕的html標(biāo)簽。而這種情況不應(yīng)該是正常的情況。如果您經(jīng)常寫(xiě)兩套，則表示您的頁(yè)面可能不適合編寫(xiě)響應(yīng)性。最好直接寫(xiě)兩套。 還有一個(gè)問(wèn)題，有時(shí)您可能想使用rem/transform:比例來(lái)進(jìn)行大小縮放，但這必須是最好的策略，我們的原則是保持字體大小和間距不變，當(dāng)屏幕跨度不是很大時(shí)。使用變換的結(jié)果是，當(dāng)下拉屏幕時(shí)，內(nèi)容變小，但由于變換不會(huì)導(dǎo)致重新排列，因此它占據(jù)的高度非常大，以至于不會(huì)跟隨以下內(nèi)容。這將必須手動(dòng)計(jì)算內(nèi)容的高度。此外，如果您使用rem，它與響應(yīng)性的想法相沖突。如果頁(yè)面的部分字體大小使用rem，而字體大小的另一部分使用px，則不協(xié)調(diào)。如果你編寫(xiě)rem all，則不需要使用響應(yīng)式開(kāi)發(fā)。此時(shí)您可能需要考慮它，UI是否存在問(wèn)題？讓UI重新調(diào)整。此外，有時(shí)可以使用高級(jí)媒體查詢(xún)。例如，當(dāng)高度小于高度時(shí)，框架不能超出頁(yè)面的高度;當(dāng)高度大于時(shí)，頁(yè)腳的位置固定在底部，否則頁(yè)腳位于下方?？梢粤艨?。