今天給各位分享CSS響應(yīng)式布局的知識，其中也會對css響應(yīng)式布局文件進行解釋，如果能碰巧解決你現(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)容居中外加背景

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

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

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

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

實踐案例：Float 布局、絕對布局

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

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

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

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

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

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

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

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

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

——通過響應(yīng)式設(shè)計能使網(wǎng)站在手機和平板電腦上有更好的瀏覽閱讀體驗。屏幕尺寸不一樣展示給用戶的網(wǎng)頁內(nèi)容也不一樣.利用媒體查詢可以檢測到屏幕的尺寸(主要檢測寬度)，并設(shè)置不同的CSS樣式，就可以實現(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的放到瀏覽器窗口上，而移動端視口就有點特殊，移動端視口的寬度是比移動端屏幕要寬，寬度尺寸一般是980px或者1024px，網(wǎng)頁是視口上渲染完之后，為了能在移動端屏幕上顯示整個網(wǎng)頁，整個視口會整體縮放到屏幕的寬度，這樣，網(wǎng)頁看上去就整體縮放

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

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

大概有以下幾種

1、流體布局

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

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

注意兩個概念

2、彈性盒模型布局flex

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

3、rem布局

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

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

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

Bootstrap是最典型的一種

待補充

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

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

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

rem其實是一個單位 ，是個相對單位 root em。rem就是root（根元素的大小）相對于html元素的字體大小的單位。

rem布局的原理

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

rem優(yōu)勢

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

rem的作用

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

簡單用法

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

具體設(shè)置如下

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

待補充

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

待補充

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