html5移動端知識點總結

標籤：屬性   ace   meta   key   ext   優點   name   總結   maximum   

第一章，控制html字型大小

1.1使用媒體查詢，不同解析度設定不同的html的font-size

　　  @(min-width:320px){ html{font-size:10px;} }

　　 @(min-width:360px){ html{font-size:11.25px;} }

　　 @(min-width:400px){ html{font-size:12.5px;} }

　　 @(min-width:640px){ html{font-size:20px;} }

　　優點：使用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代碼

第2章禁止a,button,input,optgroup,select,textarea等標籤背景變暗效果

　　在移動端使用<a>標籤做按鈕的時候或者文字連結的時候，點擊按鈕會出現一個“暗色的”背景，比如如下代碼：

　　<a href="">button1</a>

　　<input type="button" value="提交"/>

　　在移動端點擊之後 會出現“暗色的”背景，這時候我們需要在CSS中加入如下代碼即可：

　　a,button,input,optgroup,select,textarea{

　　 -webkit-tap-highlight-color:rgba(0,0,0,0);

　　}

第3章 meta基礎知識點

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

　　<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

　　屬性基本含義：
　　width=device-width:控制viewport的大小，device-width為裝置的寬度
　　initial-scale：初始化縮放比例
　　minimum-scale：允許使用者縮放的最小比例
　　maximum-scale：允許使用者縮放的最大比例
　　user-scalable：使用者是否可以手動縮放

第四章 webkit表單輸入框placeholder的顏色值改變

　　如果想要預設的顏色顯示紅色，代碼如下： input::-webkit-input-placeholder{color:red}

　　如果想要使用者點擊變為藍色，代碼如下： input:focus::-webkit-input-placeholder{color:blue}

　　

html5移動端知識點總結