zoukankan      html  css  js  c++  java
  • 移动端开发页面样式重置的几个知识点

    一、 在手机中,当处于模块一状态时,用户触摸到“按钮”,a标签的边框显示出来,这明显不是我们要想要的体验。加上-webkit-tap-highlight-color即可去除。

    -webkit-tap-highlight-color:rgba(0,0,0,0)|transparent;

    利用此属性,设置touch时链接区域透明度alpha设置为0,去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android),推荐在body上加此属性,这样就保证body的点击区域效果一致了。

    为了让你的网站感觉更快,你需要让你的按钮立即响应用户的触摸,给用户一个明显的视觉指示--有些事情正在发生。

    有一个很赞的属性用在网站上的按钮或链接;它是:active伪类。我们在桌面端一直使用这个伪类。

    在手机端如果想要相应相应用户的触摸,立即给出明显的视觉响应,可以用这个。

    二、在移动端中想要去除文本框的默认样式可以使用-webkit-appearance

    -webkit-appearance:none;
    

    加上此属性会将webkit浏览器中的元素默认样式去除。这里我分享个链接http://www.cnblogs.com/callmesummer/p/4339889.html 

    **注意:不同type的input使用这个属性之后表现不一。text、button无样式,radio、checkbox直接消失!

    三、阻止按下选中选择文本,可以使用-webkit-user-select

    -webkit-user-select:none;
    

    **请谨慎使用这个属性:因为大部分用户是来查看信息的,他们可以复制并存储下来以备将来之用,所以这种方法既无用也无效。如果你禁用了复制粘贴功能,用户还是可以通过查看源文件来获取到他们想要的内容。

    四、当样式表里font-size<12px时,浏览器里字体显示仍为12px,这时可以用-webkit-text-size-adjust

    -webkit-text-size-adjust: none;

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

    五、当你触摸并按住触摸目标时候,想禁止或显示系统默认菜单可以用-webkit-touch-callout

    -webkit-touch-callout:none;
    

    img和a标签都要加。

    六、手机端,解决 overflow-y:scroll;卡顿问题-webkit-overflow-scrolling 

    -webkit-overflow-scrolling : touch;

    现在很多for Mobile的H5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼。要实现这个效果很简单,只需要加一行css代码即可。

  • 相关阅读:
    Struts2中的类型转换失败
    使用 paramsPrepareParamsStack 拦截器栈后的运行流程
    Action请求流程分析
    Struts2的默认拦截器执行顺序
    网络通信的整个流程
    路由和交换机工作原理
    网络编程之socket
    关于socket的setsockopt的使用
    socket工作原理深入分析
    网络通信协议(互联网协议)
  • 原文地址:https://www.cnblogs.com/tween/p/4865644.html
Copyright © 2011-2022 走看看