HTML5 mobile End Knowledge Point Summary

Chapter One, controlling HTML font size

1.1 Using media queries, different resolutions set different HTML Font-size

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

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

< Span class= "Hljs-pseudo" > @ (min-width : 400px) {html{font-size:12.5PX;}}

< Span class= "Hljs-pseudo" > @ (min-width:640px) {Html{font-size:20px;}

advantages: the use of CSS can be implemented without the need for JS code
Disadvantage: can only match some models

1.2 using JS code to control the font-size size of HTML

var html = Document "html") ;

var clientwidth = Html.width

< Span class= "hljs-string" > Html.style.fontsize = Clientwidth/18 + "px" Span class= "Hljs-comment",

< Span class= "hljs-comment" > advantages: can match all models, adaptable strong
Disadvantage: need to write JS code

The 2nd Chapter prohibits the dim effect of A,button,input,optgroup,select,textarea and other labels.

When the mobile side uses the <a> label to make the button or the text link, the Click button will appear a "dark color" background, such as the following code:

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

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

after clicking on the mobile side There will be a "dark" background, when we need to add the following code to the CSS:

a,button, Input,optgroup,select,textarea{

-webkit-tap-highlight-color:rgba ( Span class= "Hljs-number" >0,0,0,0) ;

　　}

Chapter 3rd meta-Basic knowledge points

3.1 page window automatically adjusts to device width and prevents users from zooming the page

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

The basic meaning of the attribute:
Width=device-width: Controls the size of the viewport, device-width the width of the device
Initial-scale: Initializing the zoom ratio
Minimum-scale: Minimum scale allowed for user scaling
Maximum-scale: Maximum scale allowed for user scaling
User-scalable: Whether the user can manually scale

The fourth chapter WebKit the color value change of placeholder of form input box

　　如果想要默认的颜色显示红色，代码如下： input::-webkit-input-placeholder{color:red}

　　如果想要用户点击变为蓝色，代码如下： input:focus::-webkit-input-placeholder{color:blue}

　　

HTML5 mobile End Knowledge Point Summary