移动端样式重置

  1. -webkit-text-size-adjust: none;
    禁止文字自动调整大小(默认情况下旋转设备的时候文字大小会发生变化),此属性也不继承,一般加在body上规定整个body的文字都不会自动调整

  2. -webkit-tap-highlight-color: rgba(0,0,0,0);
    透明度设置为0,去掉点击a/button/input时默认的虚框(Android)或者被点击时灰色半透明覆盖层(iOS)或者
    -webkit-tap-highlight-color: rgba(255,0,0,0.5); //利用此属性,设置touch时链接区域高亮为50%的透明红,只在ios上起作用。android上只要使用了此属性就表现为边框。在body上加此属性,这样就保证body的点击区域效果一致了

  3.              -webkit-appearance: none; 
                 border-radious:0;
    

消除输入框和按钮的原生外观,在iOS上默认为圆角有背景颜色,加上这个属性才能给按钮和输入 框自定义样式
不同type的input使用这个属性之后表现不一。text、button无样式,radio、checkbox直接消失、
另外,select加上这个属性后,select的高度就可以改变了。如:select{-webkit-appearance:none;}

  1. 禁止页面文字选择 ,此属性不继承,一般加在body上规定整个body的文字都不会自动调整(安卓无效,在事件那章搞定,包括长按出菜单,用阻止touchstart后的默认行为搞定)

5.-webkit-text-size-adjust:none; -webkit-touch-callout:none;禁用长按页面时的弹出菜单 ,img和a标签都要加 (安卓无效)

  1. 修改placehoulder的样式
    input::-webkit-input-placeholder{
    color:blueviolet; //默认的样式

         }
    input:focus::-webkit-input-placeholder{
        color:aqua; //点击后的样式 
        }    
    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值