zoukankan      html  css  js  c++  java
  • 简单重置移动端默认样式

    *, *: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                      继承父元素的值


  • 相关阅读:
    如何修改MySQL的默认安装路径
    给WordPress分类目录和页面添加斜杠
    制作macOS Sierra 正式版USB安装盘的方法
    Companion.JS 与 Microsoft Script Debugger 结合IE javaScript 调试工具
    启动Weblogic报出java.lang.OutOfMemoryError: PermGen space异常
    Spring中@Autowired注解、@Resource注解的区别
    webligc VALIDATION PROBLEMS WERE FOUND problem错误
    解决visio在win7下意外退出问题
    myeclipse 9.0 配svn 报 Failed to load JavaHL Library 解决方法
    powerDesigner 15 unable to list the users 解决方法
  • 原文地址:https://www.cnblogs.com/Aladingding/p/4646311.html
Copyright © 2011-2022 走看看