美文网首页
移动端样式处理

移动端样式处理

作者: Cooli丨Y | 来源:发表于2019-01-25 10:23 被阅读0次

    清除手机tap事件后 element 时候出现的一个高亮
        * { -webkit-tap-highlight-color: rgba(0,0,0,0); }
    
    移动端取消touch高亮效果
    .xxx {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    

    禁止长按链接与图片弹出菜单
    * { -webkit-touch-callout: none; }
    
    如何禁止保存或拷贝图像
    img {
        -webkit-touch-callout: none;
      }
      /*PS:需要注意的是,该方法只在 iOS 上有效。*/
    
    clip属性,截取你想要显示的图片
    * { position: absolute;
        clip: rect(0px,60px,200px,0px); 
    }
    

    动画的处理/开启硬件加速/解决页面闪白/保证动画流畅
    .css {
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    

    移动端如何清除输入框内阴影
        input,textarea {
        border: 0;
        -webkit-appearance: none;
    }
    
    消除transition闪屏
    .css{
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
    }
    



    相关文章

      网友评论

          本文标题:移动端样式处理

          本文链接:https://www.haomeiwen.com/subject/fzqmjqtx.html