移動端流式布局

2022-08-26 02:51:10 字數 435 閱讀 8127

移動端除錯方法

視口(viewport)就是瀏覽器顯示頁面內容的螢幕區域。視口可以分為布局視口、視覺視口和理想視口

視覺視口 visual viewport

我們可以通過縮放去操作視覺視口,但不會影響視口,布局視口仍保持原來的寬度

理想視口ideal viewport

理想視口,對裝置來講,是最理想的視口尺寸

需要手動填寫meta視口標籤通知瀏覽器操作

meta視口標籤的主要目的:布局視口的寬度應該與理想視口的寬度一致,簡單理解就是裝置有多寬。我們布局的視口就有多寬

meta視口標籤

二倍圖物理畫素&物理畫素比

多倍圖移動端主流方案

響應式頁面相容移動端

移動端技術解決方案

css初始化normalize.css

特殊樣式

移動端技術選型

移動Web端 流式布局

2 作為開發者無需關注這些解析度,因為我們常用的尺寸單位是 px 3 移動端除錯方法 1 chrome devtools 谷歌瀏覽器 的模擬手機除錯 2 搭建本地web伺服器,手機和伺服器乙個區域網內,通過手機訪問伺服器 3 使用外網伺服器,直接ip或網域名稱訪問 二 視口 視口 viewport ...

京東移動端首頁流式布局

立即開啟 登入 京東超市 京東超市 京東超市 京東超市 京東超市 京東超市 京東超市 京東超市 京東超市 京東超市 body img 頭部 height 45px float left color fff line height 45px text align center width 8 widt...

Android端流式布局

public class searchflowlayout extends viewgroup public searchflowlayout context context,attributeset attrs public searchflowlayout context context,att...