列表的響應式排版

2022-05-02 07:30:09 字數 817 閱讀 9014

效果展示:

一、每行固定個數：保證排版的美觀

.list li
二、隨頁面寬度調整個數和大小：保證**的可讀性

.list li
1、**查詢控制寬度

@media screen and (max-width:1280px)}


@media screen and (max-width:600px)}


@media screen and (max-width:400px)}
方便、但存在相容性

2、js控制

$(window).resize(function () )


function resizelist()else if(s_width>400 && s_width <=600)else if(s_width>200 && s_width <=400)else if(s_width<=200)}



$(window).resize（）實時獲取瀏覽器的寬度
注意事項：1、不變形

.a-common.a-common img
2、文字溢位處理

.title, .subtitle

Bootstrap 排版 列表頁面

bootstrap標題四 bootstrap標題五 bootstrap標題六 bootstrap標題一 bootstrap標題二 bootstrap標題三 bootstrap標題四 bootstrap標題五 bootstrap標題六 bootstrap標題四我是副標題 bootstrap標題五我是副...

響應式布局 響應式布局技巧

一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...

vue的響應式系統 和響應式原理

web m v 組成 mvc 發生在後端 mvc 是一種使用 mvc model view controller 模型 檢視 控制器 設計建立 web 應用 model 模型 表示應用程式核心 比如資料庫記錄列表 view 檢視 顯示資料 資料庫記錄 controller 控制器 處理輸入 寫入資料...