今天給各位分享CSS響應(yīng)式布局的知識，其中也會對css響應(yīng)式布局文件進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關(guān)注本站，現(xiàn)在開始吧！

本文目錄一覽：

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

CSS3布局方式有哪些？

1.靜態(tài)布局

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5.彈性布局

——rem/em、flex布局

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

網(wǎng)頁視口尺寸

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

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

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

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

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

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

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

css樣式布局及rem用法梳理

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

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

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

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

大概有以下幾種

1、流體布局

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

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

注意兩個概念

2、彈性盒模型布局flex

這種布局方式是通過css3新增的一些輔助布局的樣式屬性來制作布局的方式。

3、rem布局

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

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

通過樣式動態(tài)查詢屏幕的寬度，動態(tài)切換樣式來適配不同寬度屏幕的布局方式。

Bootstrap是最典型的一種

待補(bǔ)充

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

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

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

rem其實(shí)是一個單位 ，是個相對單位 root em。rem就是root（根元素的大?。┫鄬τ趆tml元素的字體大小的單位。

rem布局的原理

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

rem優(yōu)勢

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

rem的作用

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

簡單用法

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

具體設(shè)置如下

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

待補(bǔ)充

可以通過js的方式來改變，也可以通過css媒體查詢的方式來改變，

待補(bǔ)充

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