html5移動端知識點總結

2022-07-20 19:09:11 字數 1212 閱讀 4438

1.1使用**查詢,不同解析度設定不同的html的font-size

@(min-width:320px) }

@(min-width:360px) }

@(min-width:400px) }

@(min-width:640px) }

優點:使用css即可實現,不需要js**

缺點:只能匹配部分機型

1.2使用js**控制html的font-size大小

var html = document.queryselector("html");

var clientwidth = html.getboundingclientrect().width;

html.style.fontsize = clientwidth/18 + "px";

優點:可以匹配所有的機型,適配很強

缺點:需要寫js**

button1a>

在移動端點選之後 會出現「暗色的」背景,這時候我們需要在css中加入如下**即可:

a,button,input,optgroup,select,textarea

3.1頁面視窗自動調整到裝置寬度,並禁止使用者縮放頁面

屬性基本含義:

width=device-width:控制viewport的大小,device-width為裝置的寬度

initial-scale:初始化縮放比例

minimum-scale:允許使用者縮放的最小比例

maximum-scale:允許使用者縮放的最大比例

user-scalable:使用者是否可以手動縮放

如果想要預設的顏色顯示紅色,**如下: input::-webkit-input-placeholder

如果想要使用者點選變為藍色,**如下: input:focus::-webkit-input-placeholder

html5移動端製作知識點總結

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

HTML5知識點總結(三)

字型及文字屬性 邊距和填充 邊框屬性 列表屬性 背景屬性 背景的漸變 陰影屬性 字型屬性 type text css font 設定字型是所有樣式 font family 設定字型型別 font size 設定字型大小 font weight 設定字型粗細 color 設定字型顏色 font fam...

html5移動開發知識點大全

橫屏時使用的樣式 手勢事件 touchstart 當手指接觸螢幕時觸發 touchmove 當已經接觸螢幕的手指開始移動後觸發 touchend 當手指離開螢幕時觸發 touchcancel 觸控事件 gesturestart 當兩個手指接觸螢幕時觸發 gesturechange 當兩個手指接觸螢幕...