html5移动端知识点总结

第一章，控制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}