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代码即可。

  • 相关阅读:
    Java Web前后端分离的思考与实践
    JDBC剖析篇(1):java中的Class.forName()
    UVa1471
    Uva11572
    Uva11134
    Uva10755
    Floyd判圈法
    Java泛型-通配符的上限和下限问题
    Codeforces 384E-线段树+dfs序
    codeforcesRound378C-dfs+树状数组
  • 原文地址:https://www.cnblogs.com/tween/p/4865644.html
Copyright © 2011-2022 走看看