移動端頁面布局
流式布局(百分比布局自適應布局)
視口可見視口 裝置螢幕寬度
布局視口 網頁寬度
理想視口 通過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...