h5移动端知识要点

第1章 使用rem作为单位

html{font-size:10px}

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;}}

给手机设置10px的字体大小；对于320px的手机匹配是10px，其他手机都是等比例匹配；

优点：使用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 href="">button1</a>

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

在移动端点击之后 会出现“暗色的”背景，这时候我们需要在CSS中加入如下代码即可：a,button,input,optgroup,select,textarea{ -webkit-tap-highlight-color:rgba(0,0,0,0);}

第三章 移动端如何定义字体font-family

body{ font-family:"Helvetica Neue",Helvetica,sans-serif}

第四章 webkit表单输入框placeholder的颜色值改变

       如果想要默认的颜色显示红色

       代码如下：input::-webkit-input-placeholder{color:red}

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

第五章 在IOS中 禁止长按链接与图片弹出菜单

a,img{-webkit-touch-callout:none}