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等标签背景变暗效果

在移动端使用标签做按钮的时候或者文字链接的时候，点击按钮会出现一个“暗色的”背景，比如如下代码：

button1

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

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

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

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

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

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