一學就會！原來web網(wǎng)頁布局是這樣的……

時間：2023-09-09 02:48:01 | 來源：網(wǎng)站運營

時間：2023-09-09 02:48:01 來源：網(wǎng)站運營

一學就會！原來web網(wǎng)頁布局是這樣的……：網(wǎng)頁設(shè)計中的布局一般分為前端視角和設(shè)計視角。其中，前端視角主要是指實現(xiàn)頁面的各種CSS布局方式，分別為：靜態(tài)布局、流式布局、響應(yīng)式布局、彈性布局和Flex布局。除了靜態(tài)布局，其他都能實現(xiàn)在不同分辨率下頁面的自適應(yīng)，來給用戶最佳的視覺呈現(xiàn)。今天，就給大家講講前端網(wǎng)頁設(shè)計中的靜態(tài)布局和流式布局。

靜態(tài)布局

概念

靜態(tài)布局是最簡單的一種布局方式，網(wǎng)頁上的所有元素的尺寸一律使用px作為單位,在正常文檔流中該是什么位置就是什么位置。

特點

不管瀏覽器尺寸具體是多少，網(wǎng)頁布局始終按照最初寫代碼時的布局來顯示，如果設(shè)置了最小寬度，當小于這個寬度就會出現(xiàn)滾動條，如果大于這個寬度則內(nèi)容居中外加背景，常用于PC端。

設(shè)計方法

居中布局，所有樣式使用絕對寬度/高度(px)，在屏幕寬高有調(diào)整時，使用橫向和豎向的滾動條來查閱被遮掩部分。

優(yōu)缺點

優(yōu)點：這種布局最簡單，也沒有兼容性問題。

缺點：不能根據(jù)用戶的屏幕尺寸做出不同的表現(xiàn)。

5實踐案例

例如我們常用絕對定位布局，盒子固定寬度居中，里面三塊固定寬高，通過定位方式一行排列，適用于PC端。

顯示效果：

當頁面窗口縮小的時候，超出部分用滾動條顯示查詢。

移動端

由于靜態(tài)布局不適用于手機端,所以一般都會另設(shè)計一個布局,并使用另一個域名。例如百度。

可以發(fā)現(xiàn)：

PC端限制了最小的寬度, 低于了則以最小寬度出現(xiàn)滾動條；

移動端限制了最大的寬度, 超過了則以最大寬度居中顯示。

流式布局

概念

流式布局也叫百分比布局，頁面元素的寬度按照屏幕分辨率進行適配調(diào)整，但整體布局不變。

特點

屏幕分辨率變化時，頁面里元素的大小會變化而但布局不變，如果內(nèi)容過長,可以實現(xiàn)自動換行。

設(shè)計方法

使用%百分比定義寬度，高度大都是用px來固定住，可以根據(jù)可視區(qū)域和父元素的實時尺寸進行調(diào)整，盡可能的適應(yīng)各種分辨率。往往配合max-width/min-width等屬性控制尺寸流動范圍以免過大或者過小影響閱讀。

優(yōu)缺點

優(yōu)點：可用來應(yīng)對不同尺寸的PC屏幕，在移動端開發(fā)也是常用布局方式；

缺點：如果屏幕尺度跨度太大，那么在相對其原始設(shè)計而言過小或過大的屏幕上不能正常顯示，因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得“流式”），顯示非常不協(xié)調(diào)。

實踐案例

例如我們常用左側(cè)固定，右側(cè)自適應(yīng)；左右固定寬度，中間自適應(yīng)；圣杯布局，雙飛翼布局，品字布局。下面是品字布局代碼。

顯示效果：

當頁面窗口縮小的時候，頁面布局也不會發(fā)生變化。

就算是在移動端，布局也不會發(fā)生變化。