常用的布局方式

2021-08-08 21:11:19 字數 490 閱讀 9862

1.流式布局。

網頁中主要的劃分區域的尺寸使用百分數,常見的就是寬度百分比,高度和字型px寫。

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

流式布局在css2時代就有,主要是靠百分比進行排版,可以在不同解析度下顯示相同的版式

2.響應式布局。

隨著css3出現了**查詢技術,出現了響應式設計的概念。響應式設計的目標是確保乙個頁面在所有終端上(各種尺寸的pc、手機、手錶、冰箱的web瀏覽器等等)都能顯示出令人滿意的效果,對css編寫者而言,在實現上不拘泥於具體手法,但通常是糅合了流式布局+彈性布局,再搭配**查詢技術使用。

響應式布局的關鍵技術是css3中的**查詢,可以在不同解析度下對元素重新設定樣式(不只是尺寸),在不同螢幕下可以顯示不同版式

一般來說響應式布局配合流式布局效果更好

特別常用的布局方式

作品詳情div class sui dl class sui dt class sui icon i 作品名稱 dt class sui dd sui dd three 風景之十五dd dl class sui dl class sui dt class sui icon i 創作形式 dt cla...

WEB前端常用布局方式

頁面的布局方式是塊狀元素依次從上至下 從左至右進行布局 對公司 企業而言視覺極佳的布局效果能讓在瞬間抓住客戶的心,能吸引潛在的合作者。適用性,根據不同行業情況進行不同效果的製作。吸引性,視覺效果優秀的布局效果能瞬間吸引客戶。靜態布局是最為原始的布局方式,沒有什麼技術性可言,往往是計算機行業剛剛入門的...

前端7大常用布局方式

頁面的布局方式是塊狀元素依次從上至下 從左至右進行布局 對公司 企業而言視覺極佳的布局效果能讓在瞬間抓住客戶的心,能吸引潛在的合作者。適用性,根據不同行業情況進行不同效果的製作。吸引性,視覺效果優秀的布局效果能瞬間吸引客戶。靜態布局是最為原始的布局方式,沒有什麼技術性可言,往往是計算機行業剛剛入門的...