zoukankan      html  css  js  c++  java
  • 移动端重置样式 特殊处理

     

    移动端重置样式

    1、禁止用户选中文字,安卓无效 ­webkit­user­select: none;

    2、禁止长按弹出系统菜单。 ­webkit­touch­callout: none;

    3、去除android下a/button/input标签被点击时产生的边框 & 去除ios下a标签被点击时产生的半透明灰色背景。

    ­webkit­tap­highlight­color: rgba(0,0,0,0);

    4、切换横竖屏或者用户自己通过浏览器设置的话,可以改变字体的大小(需要给body下的所有元素) ­ webkit­text­size­adjust: 100%;

    5、按钮在ios下都是圆角。

    ­webkit­appearance: none; 去掉浏览器默认样式

    border­radius: 0;

    6、修改placeholder的样式。input::­webkit­input­placeholder{ color:#000; } input:focus::­webkit­input­placeholder{color:#f00; }

    移动端特殊处理

    1、超小字体处理(设置字体时,不要小于 12px, 如果一定要小于 12px,使用 transform:sacle() 进行缩放。)

     

    2、动画定义3D启用硬件加速(硬件加速是指在计算机中通过把计算量非常大的工作分配给专门的硬件来处理以减轻中央处理器的工作量之技术。)

    element {

    ­webkit­transform:translate3d(0,0,0) transform: translate3d(0,0,0);

    }

     

    3、圆角bug:部分Android手机圆角失效

    element{

    background­clip: padding­box;

    }

    4、Input 的placeholder会出现文本位置偏上的情况在 IOS Android 中显示不同。解决方法是:在保证

    input 输入文本垂直居中的条件下,给 input

    padding­top,不要设置行高。

     重置css文件为:   https://files.cnblogs.com/files/ximenchuifa/normalize.css

    vscode 可安装px2rem px自动转rem插件 https://blog.csdn.net/weixin_45674894/article/details/102633226

  • 相关阅读:
    java架构之路-(面试篇)Mysql面试大全
    web工程的路径问题详解
    SQL知识点总结
    Mybatis简介
    mysql大全
    配置心得
    spring4.1.3+springmvc+mybatis3.2.1整合
    jstl标签
    jstl标签库
    Java并发控制机制
  • 原文地址:https://www.cnblogs.com/ximenchuifa/p/13353173.html
Copyright © 2011-2022 走看看