移動端h5開發基礎

2021-08-04 06:07:49 字數 861 閱讀 6289

移動端h5開發基礎知識

一.手機端開發頁面必須要加一段**:

注:這段**的主要意思是:讓頁面寬度等於裝置寬度,縮放比例為1,禁止使用者縮放。用於檢測視口,主要的效果就是取消下面的滾動條,讓頁面適應螢幕。

二.為自己的頁面設定最大寬度和最小寬度:

主要作用是在螢幕足夠大的時候,頁面也不會失真。

三.相容手機螢幕大小不同的情況:

window.οnlοad=window.οnresize=function();

在寫移動端頁面的時候要加上這一段**,這段**意思是:讓視口或者說頁面的可見寬度與根元素的字元大小產生對應關係,例如上面這段**意思是在視口寬度為640px的時候,讓根元素的字元大        小為40px(也就是1rem等於40px),這樣在視口不斷變化的時候,根元素的字元大小也會不斷變化,而且有固定的係數(1/16),這樣就產生了對應關係,也就是相容了不同螢幕大小不一樣的情況。

具體用法:引用上述js**,在設計圖640px的情況下測量距離,然後在把距離除以40,並把px為rem,這樣就可以了,注:js裡的40和640可以根據需要靈活更改,但要注意字元預設情況下最小為12px且widow.onload在只能出現一次。

四.去掉 a,input 在移動端瀏覽器中的預設樣式

1.禁止 a 標籤背景

在移動端使用 a標籤做按鈕的時候,點按會出現乙個「暗色」的背景,去掉該背景的方法如下:

a,button,input,optgroup,select,textarea

2.禁止長按 a,img 標籤長按出現選單欄

使用 a標籤的時候,移動端長按會出現乙個 選單欄,這個時候禁止呼出選單欄的方法如下

a, img

3.流暢滾動

body

h5移動端css開發總結

font size 12px transform scale 10 12 需要注意這個方式雖然縮小了字型,但該文字元素所佔據的原寬高大小並不會跟著縮小,所以很多時候還需要考慮文字位置和間距的問題。一般文字位置需要結合 transform origin 屬性來設定。例如設定文字水平居左 垂直居中 tr...

移動端 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移動端適配

原理 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...