• 移动端web开发的几个tips记录


    1. 高度处理

    • 移动端可以放心的使用min-height和max-height了,也应该学会灵活使用这些属性。
    • line-height和height避免同时使用,让line-height撑起高度即可。否则容易出现line-height>height的情况,导致显示效果不居中甚至少一截的情况。

    2. 兼容相关

    移动端可以使用很多css3和html5的东西,但要注意支持的情况,而有些属性使用时需要前缀。(兼容可以参考 http://caniuse.com/#index)。

    • 比如Box-sizing这个属性,在移动端就很有用,但在Android4.0以前需要加-webkit-的前缀。
    • 又比如Android虽然支持css的动画属性,但在4.2及之前,transform属性无法进行动画。(进一步调试后发现是在伪对象上无法使用transform的动画)

    3.bug相关

    • Android2.3中使用overflow:hidden会有宽度塌缩的情况。(例:https://github.com/snadn/test/blob/6c7cb4961a28115c99943e59d67c6d3a8fc0b014/src/mobile_overflow_bug_2.3.html)
    • 在ios中(在new ipad ios7 中测试的),使用translate进行连续的大跨度变换时(>500px),会导致浏览器崩溃。
  • 相关阅读:
    Docker--简介&&安装
    Mycat
    Mysql--主从复制
    Nginx--平滑升级
    Nginx--rewrite
    Nginx--缓存
    Mysql--SQL语句
    Nginx--虚拟主机
    Nginx--反向代理&&负载均衡
    Nginx--用户认证&&访问控制&&限速&&状态访问
  • 原文地址:https://www.cnblogs.com/snadn/p/3546496.html
Copyright © 2020-2023  润新知