轩枫阁

首页 / Web前端 / 移动前端 / CSS3 / 移动端网页重构指南 – CSS篇

移动端网页重构指南 – CSS篇

前言

本文主要介绍移动重构CSS相关部分,包括编码、字体、touch相关、硬件加速、兼容问题等。

基础篇

编码

字体设置

盒模型

上下拉动滚动条时卡顿、慢

Android3+和iOS5+支持CSS3的新属性为overflow-scrolling

禁止复制、选中文本

解决移动设备可选中页面文本(视产品需要而定)

长时间按住页面出现闪退

 iphone及ipad下输入框默认内阴影

更改输入框placeholder的颜色

placeholder的文字在ios下可以换行,android不行

ios和android下触摸元素时出现半透明灰色遮罩

设置alpha值为0就可以去除半透明灰色遮罩,备注:transparent的属性值在android下无效。

active兼容处理

动画定义3D启用硬件加速

注意:3D变形会消耗更多的内存与功耗

Retina屏的1px边框

webkit mask 兼容处理

某些低端手机不支持css3 mask,可以选择性的降级处理。

比如可以使用js判断来引用不同class:

旋转屏幕时,字体大小调整的问题

transition闪屏

圆角bug

某些Android手机圆角失效

其它最佳实践

慎用box-shadow和gradients

box-shadows与gradients往往都是页面的性能杀手,尤其是在一个元素同时都使用了它们。

尽可能让动画元素不在文档流中,以减少重排(reflow)。可以使用绝对定位。position: absolute;

以下四个属性对动画的效率较高, 可以充分利用

  • Position:transform: translate(npx, npx);
  • Scale: transform: scale(n);
  • Rotation:transform: rotate(ndeg);
  • Opactity: opacity:0…1;

参考:http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

参考自:腾讯KM – alfiehe

141/470
143/470

相关阅读

文章评论

  • 我很喜欢这篇文章,已收藏,谢谢博主!

  • 非常好

  • Mark

    • 欢迎

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子