H5開發筆記

2021-09-13 01:37:02 字數 1233 閱讀 4456

這兩天h5靜態頁面開發過程中的問題總結。

1.viewport - 移動開發必須的配置

//內容寬為裝置寬度,初始化縮放倍數為1(不縮放)

2.rem和px

(1)px是相對於顯示器螢幕解析度而言的相對長度單位。

(2)rem是相對根元素的font-size大小的相對單位,可以做到只修改根元素font-size大小就成比例地調整所有字型大小。

適配:

html   

@media (max-width:414px)

} @media (max-width:375px)

}

var devicewidth=document.documentelement.clientwidth;  

var rootfontsize = devicewidth / 6.4;

document.documentelement.style.fontsize=rootfontsize + 'px';

3.同行元素上下位移偏差問題

手動設定元素居中,要不然瀏覽器會隨機渲染,必須給它乙個渲染規則。

4.元素設定display:inline-block,自動產生間距

解決:給父元素設定font-size:0; letter-spacing: -4px; 子元素再另外設定font-size和letter-spacing。

5.自適應布局

6.除錯換解析度裝置自動重布局

//orientationchange:裝置更換事件 

//onresize:接收reset事件時觸發的eventhandler

//domcontentloaded: 瀏覽器視窗大小發生變化事件

(function (doc, win) ;

if (!doc.addeventlistener) return;

//監聽裝置變化

win.addeventlistener(resizeevt, recalc, false);

//監聽瀏覽視窗變化

doc.addeventlistener('domcontentloaded', recalc, false);

})(document, window);

7.總結

h5頁面的開發,因為裝置視口大小不一致,在適配上應該足夠細緻、嚴謹。除了自適應的布局之外,更應該注意細節的處理。

H5前端開發筆記(一)

用於首頁火柴效果與雲彩效果 經測驗css3的寫法可以完美實現幀動畫,儘管ie8及以下不支援,而使用jquery會有明顯的卡頓。webkit keyframes fire 5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 84 88 92 96 100 fi...

移動端 h5 開發筆記

1.禁止縮放 禁止快取 2.webkit 定製css 更多參考 webkit touch callout none webkit user select none webkit text size adjust none webkit tap highlight color rgba 0,0,0,1...

開發筆記 微信h5設定分享utils

private static string accesstoken private static long lastaccesstokentime 0 獲取全域性的accesstoken public static synchronized string getpublicaccesstoken r...