前言
本文主要介绍移动重构CSS相关部分，包括编码、字体、touch相关、硬件加速、兼容问题等。
基础篇
编码
|
1 |
@charset "UTF-8"; |
字体设置
|
1 2 3 |
body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; } |
盒模型
|
1 2 3 4 5 |
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } |
上下拉动滚动条时卡顿、慢
|
1 2 3 4 |
E { -webkit-overflow-scrolling: touch; overflow-scrolling: touch; } |
Android3+和iOS5+支持CSS3的新属性为overflow-scrolling
禁止复制、选中文本
|
1 2 3 4 5 6 |
E { -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none; } |
解决移动设备可选中页面文本(视产品需要而定)
长时间按住页面出现闪退
|
1 2 3 |
E { -webkit-touch-callout: none; } |
iphone及ipad下输入框默认内阴影
|
1 2 3 |
E { -webkit-appearance: none; } |
更改输入框placeholder的颜色
|
1 2 |
input::-webkit-input-placeholder { color:#999; } input:focus::-webkit-input-placeholder { color:#333; } |
placeholder的文字在ios下可以换行，android不行
ios和android下触摸元素时出现半透明灰色遮罩
|
1 2 3 |
E { -webkit-tap-highlight-color:rgba(255,255,255,0) } |
设置alpha值为0就可以去除半透明灰色遮罩，备注：transparent的属性值在android下无效。
active兼容处理
|
1 |
<body ontouchstart=""> |
动画定义3D启用硬件加速
|
1 2 3 4 |
E { -webkit-transform:translate3d(0, 0, 0) transform: translate3d(0, 0, 0); } |
注意：3D变形会消耗更多的内存与功耗
Retina屏的1px边框
|
1 2 3 |
E { border-width: thin; } |
webkit mask 兼容处理
某些低端手机不支持css3 mask，可以选择性的降级处理。
比如可以使用js判断来引用不同class：
|
1 2 3 4 5 |
if( 'WebkitMask' in document.documentElement.style){ alert('支持mask'); } else { alert('不支持mask'); } |
旋转屏幕时，字体大小调整的问题
|
1 2 3 |
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust:100%; } |
transition闪屏
|
1 2 3 4 5 |
/*设置内嵌的元素在 3D 空间如何呈现：保留3D */ -webkit-transform-style: preserve-3d; /* 设置进行转换的元素的背面在面对用户时是否可见：隐藏 */ -webkit-backface-visibility:hidden; |
圆角bug
某些Android手机圆角失效
|
1 |
background-clip: padding-box; |
其它最佳实践
慎用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
我很喜欢这篇文章，已收藏，谢谢博主！
非常好
Mark