今天給各位分享CSS響應(yīng)式布局的知識(shí)，其中也會(huì)對(duì)css響應(yīng)式布局文件進(jìn)行解釋?zhuān)绻芘銮山鉀Q你現(xiàn)在面臨的問(wèn)題，別忘了關(guān)注本站，現(xiàn)在開(kāi)始吧！

本文目錄一覽：

• 1、CSS3布局方式有哪些？
• 2、12.CSS布局篇之響應(yīng)式——vw/vh
• 3、css樣式布局及rem用法梳理

CSS3布局方式有哪些？

1.靜態(tài)布局

——最傳統(tǒng)的布局方式，網(wǎng)頁(yè)中所有尺寸都是由px作為單位，設(shè)置了min-width,如果寬度小于就會(huì)出現(xiàn)滾動(dòng)條，如果大于這個(gè)寬度則內(nèi)容居中外加背景

實(shí)現(xiàn)方式：PC：居中布局，所有樣式使用絕對(duì)寬度/高度(px)，設(shè)計(jì)一個(gè)Layout，在屏幕寬高有調(diào)整時(shí)，使用橫向和豎向的滾動(dòng)條來(lái)查閱被遮掩部分；

移動(dòng)設(shè)備：另外建立移動(dòng)網(wǎng)站，單獨(dú)設(shè)計(jì)一個(gè)布局，使用不同的域名如wap.或m.。

優(yōu)點(diǎn)：采用之前的css2的布局·方式，布局簡(jiǎn)單，沒(méi)有兼容性問(wèn)題。

缺點(diǎn): 在手機(jī)端不能合理的顯示，移動(dòng)端不能使用pc端頁(yè)面，需要再寫(xiě)一個(gè)布局來(lái)呈現(xiàn)。

實(shí)踐案例：Float 布局、絕對(duì)布局

2.自適應(yīng)布局

——可以看成是不同屏幕下由多個(gè)靜態(tài)布局組成的。自適應(yīng)布局是為不同的屏幕分辨率分別定義不同的布局。改變屏幕分辨率可以切換不同的靜態(tài)布局（頁(yè)面元素位置可能發(fā)生改變），但在每個(gè)靜態(tài)布局中，頁(yè)面元素不隨窗口大小的調(diào)整發(fā)生變化。自適應(yīng)布局頁(yè)面里面元素的位置會(huì)變化，很好的解決了流式布局中的大屏空間利用率不高弊端。

注：屏幕分辨率變化時(shí)，頁(yè)面里面元素的位置會(huì)變化而大小不會(huì)變化。

3.流失布局（百分比布局 %）

網(wǎng)頁(yè)中主要的劃分區(qū)域的尺寸使用百分?jǐn)?shù)（搭配min-*、max-*屬性使用),分別為不同的屏幕設(shè)置布局格式，當(dāng)屏幕大小改變時(shí)，會(huì)出現(xiàn)不同的布局，意思就是在這個(gè)屏幕下這個(gè)元素塊在這個(gè)地方，但是在那個(gè)屏幕下，這個(gè)元素塊又會(huì)出現(xiàn)在那個(gè)地方。只是布局改變，元素不變?？梢钥闯墒遣煌聊幌掠啥鄠€(gè)靜態(tài)布局組成的。

而流式布局的特點(diǎn)是隨著屏幕的改變，頁(yè)面的布局沒(méi)有發(fā)生大的變化，可以進(jìn)行適配調(diào)整，這個(gè)正好與自適應(yīng)布局相補(bǔ)。使用%百分比定義寬度，高度大都是用px來(lái)固定住，可以根據(jù)可視區(qū)域 (viewport) 和父元素的實(shí)時(shí)尺寸進(jìn)行調(diào)整，盡可能的適應(yīng)各種分辨率。往往配合 max-width/min-width 等屬性控制尺寸流動(dòng)范圍以免過(guò)大或者過(guò)小影響閱讀。這種布局方式在Web前端開(kāi)發(fā)的早期歷史上，用來(lái)應(yīng)對(duì)不同尺寸的PC屏幕（那時(shí)屏幕尺寸的差異不會(huì)太大），在當(dāng)今的移動(dòng)端開(kāi)發(fā)也是常用布局方式，但缺點(diǎn)明顯：主要的問(wèn)題是如果屏幕尺度跨度太大，那么在相對(duì)其原始設(shè)計(jì)而言過(guò)小或過(guò)大的屏幕上不能正常顯示。因?yàn)閷挾仁褂?百分比定義，但是高度和文字大小等大都是用px來(lái)固定，所以在大屏幕的手機(jī)下顯示效果會(huì)變成有些頁(yè)面元素寬度被拉的很長(zhǎng)，但是高度、文字大小還是和原來(lái)一樣（即，這些東西無(wú)法變得“流式”

注：屏幕分辨率變化時(shí)，頁(yè)面里元素的大小會(huì)變化而但布局不變。

主要實(shí)踐案例：左側(cè)固定+右側(cè)自適應(yīng)、左右固定寬度+中間自適應(yīng)、圣杯布局、雙飛翼布局

4.響應(yīng)式布局（媒體查詢(xún)）

——通過(guò)響應(yīng)式設(shè)計(jì)能使網(wǎng)站在手機(jī)和平板電腦上有更好的瀏覽閱讀體驗(yàn)。屏幕尺寸不一樣展示給用戶(hù)的網(wǎng)頁(yè)內(nèi)容也不一樣.利用媒體查詢(xún)可以檢測(cè)到屏幕的尺寸(主要檢測(cè)寬度)，并設(shè)置不同的CSS樣式，就可以實(shí)現(xiàn)響應(yīng)式的布局。主要依靠是css的媒體查詢(xún)。

注：每個(gè)屏幕分辨率下面會(huì)有一個(gè)布局樣式，即元素位置和大小都會(huì)變。

5.彈性布局

——rem/em、flex布局

12.CSS布局篇之響應(yīng)式——vw/vh

網(wǎng)頁(yè)視口尺寸

window.screen.height //屏幕高度，667

window.innerHeight //網(wǎng)頁(yè)視口高度，553

document.body.clientHeight //body高度，網(wǎng)頁(yè)內(nèi)容的高度根據(jù)網(wǎng)頁(yè)內(nèi)容決定

vh網(wǎng)頁(yè)視口高度的1/100

vw網(wǎng)頁(yè)視口寬度1/100

vmax取兩者（vh/vw）最大值

vmin取兩者（vh/vw）最小值

css樣式布局及rem用法梳理

視口（viewport）是用來(lái)約束網(wǎng)頁(yè)中最頂級(jí)塊元素的，即它決定了網(wǎng)頁(yè)的大小，網(wǎng)頁(yè)是先在視口上渲染，然后再通過(guò)視口放回到瀏覽器窗口上的，網(wǎng)頁(yè)的渲染過(guò)程如下：

pc端視口的大小和瀏覽器的大小一樣，所以網(wǎng)頁(yè)是1：1的放到瀏覽器窗口上，而移動(dòng)端視口就有點(diǎn)特殊，移動(dòng)端視口的寬度是比移動(dòng)端屏幕要寬，寬度尺寸一般是980px或者1024px，網(wǎng)頁(yè)是視口上渲染完之后，為了能在移動(dòng)端屏幕上顯示整個(gè)網(wǎng)頁(yè)，整個(gè)視口會(huì)整體縮放到屏幕的寬度，這樣，網(wǎng)頁(yè)看上去就整體縮放

具體如何設(shè)置視口以及禁止視口頁(yè)面縮放可以自行百度

（主要針對(duì)移動(dòng)端以及pc端網(wǎng)頁(yè)需要實(shí)現(xiàn)等比放大縮小頁(yè)面效果）

大概有以下幾種

1、流體布局

流體布局其實(shí)就是寬度用百分比，高度用固定值的布局方式，寬度通過(guò)百分比來(lái)適配不同寬度的屏幕。

為了適配手機(jī)端不同尺寸的屏幕，我們?cè)诙x元素寬度的時(shí)候可以寫(xiě)百分比，百分比是相對(duì)于屏幕的寬度，所有寬度就可以做到自適應(yīng)，而在高度方向，由于網(wǎng)頁(yè)的高度是不定的，所以我們可以把高度寫(xiě)成固定的值(px),這種布局方式叫做流體布局。

注意兩個(gè)概念

2、彈性盒模型布局flex

這種布局方式是通過(guò)css3新增的一些輔助布局的樣式屬性來(lái)制作布局的方式。

3、rem布局

rem是一種相對(duì)長(zhǎng)度單位，通過(guò)這個(gè)長(zhǎng)度單位可以實(shí)現(xiàn)元素寬高等比例縮放，從而完成不同寬度屏幕的適配。

4、響應(yīng)式布局 （媒體查詢(xún)）

通過(guò)樣式動(dòng)態(tài)查詢(xún)屏幕的寬度，動(dòng)態(tài)切換樣式來(lái)適配不同寬度屏幕的布局方式。

Bootstrap是最典型的一種

待補(bǔ)充

實(shí)際開(kāi)發(fā)中，pc端頁(yè)面需要實(shí)現(xiàn)響應(yīng)式等比縮放（即自適應(yīng)），使用rem+彈性布局是比較現(xiàn)實(shí)及理想的解決方式

移動(dòng)端可以使用rem布局，也可以使用px實(shí)現(xiàn)（主要用flex），具體看產(chǎn)品是怎么設(shè)計(jì)要求的

css3規(guī)定：1rem的大小就是根元素html的font-size的值。

rem其實(shí)是一個(gè)單位 ，是個(gè)相對(duì)單位 root em。rem就是root（根元素的大小）相對(duì)于html元素的字體大小的單位。

rem布局的原理

就是根據(jù)一個(gè)html根元素來(lái)控制，網(wǎng)頁(yè)的布局，實(shí)現(xiàn)類(lèi)似于自適應(yīng)等比例的縮放的布局。

rem優(yōu)勢(shì)

通過(guò)修改html文字的大小，來(lái)改變頁(yè)面中元素的大小，實(shí)現(xiàn)了頁(yè)面的整體控制

rem的作用

通過(guò)設(shè)置 根元素html的font-size的大小，來(lái)控制整個(gè)html文檔內(nèi)的字體大小、元素寬高、內(nèi)外邊距等，根據(jù)移動(dòng)設(shè)備的寬度大小來(lái)實(shí)現(xiàn)自適應(yīng)，不同的設(shè)備都展示一致的頁(yè)面效果。

簡(jiǎn)單用法

vscode中安裝cssrem插件，通過(guò)這個(gè)插件可以自動(dòng)計(jì)算rem數(shù)值。

具體設(shè)置如下

注意:設(shè)置后 vscode軟件需要重啟 否則計(jì)算的rem值會(huì)出錯(cuò)

待補(bǔ)充

可以通過(guò)js的方式來(lái)改變，也可以通過(guò)css媒體查詢(xún)的方式來(lái)改變，

待補(bǔ)充

CSS響應(yīng)式布局的介紹就聊到這里吧，感謝你花時(shí)間閱讀本站內(nèi)容，更多關(guān)于css響應(yīng)式布局文件、CSS響應(yīng)式布局的信息別忘了在本站進(jìn)行查找喔。