移動端知識點總結

2022-08-24 13:18:07 字數 1052 閱讀 5686

二,取消表單元素在點選態時的邊框以及半透明灰色背景

css**:

input, textarea, button, a

三,移除原生控制項樣式

css**:

input,button,textarea

四,使用rem來做響應式開發

scss**:

html 

@media screen and (min-width: 360px)

@media screen and (min-width: 400px)

}

五,定義字型

如無特殊需求,手機端無需定義中文字型,使用系統預設;

英文本型和數字字型可使用 helvetica ,三種系統(ios、android、winphone)都支援。

css**:

body

六,移動端touch事件

當使用者手指放在移動裝置在螢幕上滑動會觸發的touch事件

touchstart:當手指觸碰螢幕時候發生。不管當前有多少只手指

touchmove:當手指在螢幕上滑動時連續觸發。通常我們再滑屏頁面,會呼叫event的preventdefault()可以阻止預設情況的發生:阻止頁面滾動

touchend:當手指離開螢幕時觸發

touchcancel:系統停止跟蹤觸控時候會觸發。例如在觸控過程中突然頁面alert()乙個提示框,此時會觸發該事件,這個事件比較少用

七,click產生200-300 ms的延遲響應

頁面js捕獲click事件的**函式處理,需要300ms後才生效

解決方案:

1、fastclick可以解決在手機上點選事件的300ms延遲

2、zepto的touch模組,tap事件也是為了解決在click的延遲問題

八,**查詢判斷橫豎屏

**:

@media all and (orientation :landscape)

@media all and (orientation :portrait)

html5移動端知識點總結

1.1使用 查詢,不同解析度設定不同的html的font size min width 320px min width 360px min width 400px min width 640px 優點 使用css即可實現,不需要js 缺點 只能匹配部分機型 1.2使用js 控制html的font s...

html5移動端製作知識點總結

固屏類流體設計 1.京東 2.網 全屏 固屏,導航一般用全屏 四 標籤,放在之間 name viewport 視窗設定 width device width 頁面大小螢幕等寬 initial scale 1.0 初始縮放比例,1.0 表示原始比例大小 minimum scale 1.0 允許縮放的最...

移動端css基本知識點

移動端css基本知識點 ppi pixels per inch 也叫dpi dots per inch 表示的是每英吋所擁有的畫素 pixel 數目。數值越高,代表顯示屏能夠以越高的密度顯示影象。適用於移動端的dtd html public wapforum dtd xhtml mobile1.0 ...