移动端开发--页面样式重置的几个知识点

一、 在手机中，当处于模块一状态时，用户触摸到“按钮”，a标签的边框显示出来，这明显不是我们要想要的体验。加上-webkit-tap-highlight-color即可去除。

-webkit-tap-highlight-color:rgba(0,0,0,0)|transparent;

利用此属性，设置touch时链接区域透明度alpha设置为0，去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android),推荐在body上加此属性，这样就保证body的点击区域效果一致了。

为了让你的网站感觉更快,你需要让你的按钮立即响应用户的触摸,给用户一个明显的视觉指示--有些事情正在发生。

有一个很赞的属性用在网站上的按钮或链接;它是:active伪类。我们在桌面端一直使用这个伪类。

在手机端如果想要相应相应用户的触摸，立即给出明显的视觉响应，可以用这个。

二、在移动端中想要去除文本框的默认样式可以使用-webkit-appearance

-webkit-appearance:none;

加上此属性会将webkit浏览器中的元素默认样式去除。这里我分享个链接http://www.cnblogs.com/callmesummer/p/4339889.html　

**注意：不同type的input使用这个属性之后表现不一。text、button无样式，radio、checkbox直接消失！

三、阻止按下选中选择文本，可以使用-webkit-user-select

-webkit-user-select:none;

**请谨慎使用这个属性：因为大部分用户是来查看信息的，他们可以复制并存储下来以备将来之用，所以这种方法既无用也无效。如果你禁用了复制粘贴功能，用户还是可以通过查看源文件来获取到他们想要的内容。

四、当样式表里font-size<12px时，浏览器里字体显示仍为12px，这时可以用-webkit-text-size-adjust

-webkit-text-size-adjust: none;

禁止文字自动调整大小(默认情况下旋转设备的时候文字大小会发生变化)，此属性也不继承，一般加在body上规定整个body的文字都不会自动调整 。

五、当你触摸并按住触摸目标时候，想禁止或显示系统默认菜单可以用-webkit-touch-callout

-webkit-touch-callout:none;

img和a标签都要加。

六、手机端，解决 overflow-y:scroll;卡顿问题-webkit-overflow-scrolling 

-webkit-overflow-scrolling : touch;

现在很多for Mobile的H5网页内都有快速滚动和回弹的效果，看上去和原生app的效率都有得一拼。要实现这个效果很简单，只需要加一行css代码即可。