理解流式布局和響應式布局

2021-08-20 15:00:39 字數 489 閱讀 2302

流式布局在css2時代就有,主要是靠百分比

進行排版,可以在不同解析度下顯示

相同的版式。

流式布局:網頁中主要的劃分區域的尺寸使用百分數(搭配min-*、max-*屬性使用),例如,設定網頁主體的寬度為80%,min-width為960px。也作類似處理(width:100%, max-width一般設定為本身的尺寸,防止被拉伸而失真)。

這種布局方式在web前端開發的早期歷史上,用來應對不同尺寸的pc螢幕

(那是螢幕尺寸的差異不會太大),

在當今的移動端開發也是常用布局方式

,但缺點明顯

:寬度使用百分比定義,但是高度和文字大小等大都是用px來固定,所以在大螢幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長,但是高度、文字大小還是和原來一樣(即,這些東西無法變得「流式」),顯示非常不協調。

參考文章:響應式布局和流式布局的區別、響應式布局、幾種常見的網頁布局

流式布局和響應式布局

常見的面試題會讓你聊一聊流式布局與響應式布局,我還沒遇到過直接問他倆區別的面試官,都是根據我的專案 裡面有用到流式布局 響應式布局 圍繞這兩點感覺網上大部分部落格都長得差不多,那我就用自己粗淺的理解說一下由此展開的一點問題吧。說起流式布局首先就要提到的是老掉牙的固定布局 瀏覽器大小不影響內部元素大小...

響應式布局與流式布局

width 控制viewport的大小 height 和width相對應 initial scale 初始縮放比例,也即是當頁面第一次 load 的時候縮放比例。maximum scale 允許使用者縮放到的最大比例。minimum scale 允許使用者縮放到的最小比例。user scalable...

前端布局(流式布局 響應式布局 彈性布局等)

自適應布局的特點是分別為不同的螢幕解析度定義布局,即建立多個靜態布局,每個靜態布局對應乙個螢幕解析度範圍。改變螢幕解析度可以切換不同的靜態區域性 頁面元素位置發生改變 但在每個靜態布局中,頁面元素不隨視窗大小的調整發生變化。可以把自適應布局看作是靜態布局的乙個系列。1 布局特點 螢幕解析度變化時,頁...