移動端頁面布局 常用事件

2022-06-20 22:48:12 字數 634 閱讀 4128

移動端頁面布局

流式布局(百分比布局自適應布局)

視口可見視口   裝置螢幕寬度

布局視口   網頁寬度

理想視口   通過meta標籤 理想視口是瀏覽器的事情

視口相關屬性

width  px  定義視口的寬度

height  px   定義視口的高度

initial-scale     [0.0-10.0]   定義初始縮放值

minimum-scale   [0.0-10.0]    定義最小縮小比例

maximum-scale   [0.0-10.0]   定義最大縮小比例

user-scalable    yes/no        定義是否允許使用者手動縮放頁面預設值 yesf

移動端常用事件

4種最基本的觸控事件

touchstart     手指觸控螢幕時觸發       touchend      手指離開螢幕時觸發

touchmove   手指在螢幕上滑動時觸發    touchcancel   系統取消touch事件時觸發

dom.addeventlistener  ('事件名稱',function(e){},'冒泡,捕獲');

移動端頁面布局

上下兩條固定到上邊和下邊,中間的內容區域佔據剩餘的空間 all html,body,container 第一種方法 1 header高度固定畫素,footer固定畫素。section高度calc 100 header高度 footer高度 2 header,footer設定絕對定位的方式 absol...

移動端頁面布局

關於移動端頁面的總結,最近接觸移動端頁面,簡單的介紹幾種頁面布局吧,以後繼續補充。1 移動端頁面需要在頭部新增 2 移動頁面的布局方式 1 橫向百分比,縱向畫素值 可以採用百分比 相對度量單位 進行盒模型橫向屬性 width 左右內邊距 左右外邊距 的製作,使用em 相對度量單位 實現文字的處理。但...

移動端開發頁面布局 3

1 響應式布局定義 頁面布局會隨著螢幕大小變化而發生不同的響應,稱為響應式布局。1 不需要單獨寫移動端頁面 2 根據不同裝置發生變化 2 原理 通過 查詢針對不同寬度的裝置進行布局和樣式的設定,從而適配不同裝置 分四個檔位 手機 768px 平板 768px 992px 桌面顯示器 992px 12...