首页 > 移动平台 > 详细

简单重置移动端默认样式

时间:2015-07-14 20:09:04      阅读:695      评论:0      收藏:0      [点我收藏+]
*, *:before, *:after {
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -moz-tap-highlight-color: rgba(0, 0, 0, 0);//移动端系统中点击某标签会触发默认的高亮背景框显示,与outline的默认样式类似,但更加简单粗暴
  -moz-user-select: -moz-none;//禁止用户选中文本,-moz-none,是写给老版本的ff的方法,当然新版本也是向上兼容的
  -webkit-touch-callout: none;//目前还是个私用属性,ios2.0以上的safari实现良好,安卓尚未支持
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;//设置元素的宽度取值方式,border-box包括
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -ms-touch-action: pan-y;
}

   -moz-tap-highlight-color: rgba(0, 0, 0, 0);//移动端系统中点击某标签会触发默认的高亮背景框显示,与outline的默认样式类似,但更加简单粗暴,想有统一的体验,就清除掉就好了

-ms-user-select 可设置 4 个值:

  • text – 可以选择文本
  • element – 可以选择文本,但选择范围受元素边界的约束
  • none – 不可以选择文本
  • auto – 如果该元素包含可编辑的文本(如输入元素或可编辑内容的元素),则可以选择文本。否则,元素内容是否可选择由父节点的值决定。

 

 

-webkit-touch-callout

 

当你触摸并按住触摸目标时候,禁止或显示系统默认菜单。在iOS上,当你触摸并按住触摸的目标,比如一个链接,Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。

 

 -ms-touch-action

 

        ---------------   在IE10下给元素增加触控效果 

 

  • auto                        默认值,允许浏览器给元素添加touch行为
  • none                       不允许默认的touch行为
  • pan-x                      允许水平轴触摸驱动的平移
  • pan-y                      允许垂直轴触摸驱动的平移
  • pinch-zoom             允许拖拽缩放 
  • manipulation           允许触摸驱动的平移和拖拽缩放
  • double-tap-zoom     允许整个页面双击缩放指定元素
  • inherit                      继承父元素的值

 

简单重置移动端默认样式

原文:http://www.cnblogs.com/Aladingding/p/4646311.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!