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

  • 相关阅读:
    Linux 学习之DNS服务器
    Windows系统镜像自动添加驱动程序
    Linux下集群的搭建
    Heartbeat+LVS构建高可用负载均衡集群
    Keepalived高可用集群搭建(转载linuxIDC)
    CentOS 7.x设置自定义开机启动,添加自定义系统服务
    代码改变世界
    Vim食用指南
    Hibernate三种状态详解
    MySQL服务器的安装与配置
  • 原文地址:https://www.cnblogs.com/ximenchuifa/p/13353173.html
Copyright © 2011-2022 走看看