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