移動端 H5 場景應用 破繭成蝶 案例鑑賞

2021-08-28 21:55:27 字數 775 閱讀 9746

案例:

<

!doctype

html

>

"content-type" content=

"text/html; charset=utf-8"

>

無標題文件<

/title>

"viewport" content=

"width=640, user-scalable=no,target-densitydpi=device-dpi"

>

*html

li#main

#c1#list

#list > li

#list > li.zindex

#list > li:nth-of-

type(1

)#list > li:nth-of-

type(2

)#list > li:nth-of-

type(3

)#list > li:nth-of-

type(4

)#list > li:nth-of-

type(5

)#list > li:nth-of-

type(6

)#list > li:nth-of-

type(7

)#list > li:nth-of-

type(8

)<

/style>

h5移動端適配

原理 postcss function 視覺稿的1 10 在index.html中指定 font size為document寬度的1 10 iphonex 的解析度 2436 1125 pt 812 375 dpr 3 iphonexr的解析度 1792 828 pt 896 414 dpr 3 i...

移動端h5優化

1 減少js載入體積 很多庫能用cdn的盡量使用cdn,這樣打包出來的js體積會很小,載入很快。2 盡量採用比較輕量級的ui 元件庫 比如museui,mintui等 4 儘量減少網路請求數量 程式中的資料,有的能乙個介面返回的盡量乙個介面返回,不要弄太多的介面。5 盡量把大的js 檔案進行分割成小...

移動端H5除錯

背景 開發pc頁面的時候使用chrome瀏覽器的開發者工具,可以很容易的捕獲到頁面的dom元素,並且可以修改樣式,方便除錯 但是手機上卻很麻煩,因為手機上沒有辦法直接開啟開發者工具檢視元素。其實可以通過將裝置連線到pc,使用pc的開發者工具檢測。fiddler抓包工具 fiddler是強大的抓包工具...