与我们合作
我们专注：网站策划设计、网络多媒体传播、网站优化及网站营销、品牌策略与设计
主营业务：网站建设、移动端微信小程序开发、VI设计、网络运营、云产品·运维解决方案
有一个品牌项目想和我们谈谈吗?
您可以填写右边的表格，让我们了解您的项目需求，这是一个良好的开始，我们将会尽快与您取得联系。当然也欢迎您给我们写信或是打电话，让我们听到您的声音
您也可通过下列途径与我们取得联系：
地 址: 深圳.龙岗区大运软件小镇11栋3楼
电 话: 138 2888 4598 / 138 0880 9053
网 址: http://www.appvx.cn
快速提交您的需求 ↓
本文主要介绍移动重构CSS相关部分，包括编码、字体、touch相关、硬件加速、兼容问题等。
基础篇
编码
@charset "UTF-8";
字体设置
body {
font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}
盒模型
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
上下拉动滚动条时卡顿、慢
E {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
Android3+和iOS5+支持CSS3的新属性为overflow-scrolling
禁止复制、选中文本
E {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
解决移动设备可选中页面文本(视产品需要而定)
长时间按住页面出现闪退
E {
-webkit-touch-callout: none;
}
iphone及ipad下输入框默认内阴影
E {
-webkit-appearance: none;
}
更改输入框placeholder的颜色
input::-webkit-input-placeholder { color:#999; }
input:focus::-webkit-input-placeholder { color:#333; }
placeholder的文字在ios下可以换行，android不行
ios和android下触摸元素时出现半透明灰色遮罩
E {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
设置alpha值为0就可以去除半透明灰色遮罩，备注：transparent的属性值在android下无效。
active兼容处理
<body ontouchstart="">
动画定义3D启用硬件加速
E {
-webkit-transform:translate3d(0, 0, 0)
transform: translate3d(0, 0, 0);
}
注意：3D变形会消耗更多的内存与功耗
Retina屏的1px边框
E {
border-width: thin;
}
webkit mask 兼容处理
某些低端手机不支持css3 mask，可以选择性的降级处理。
比如可以使用js判断来引用不同class：
if( 'WebkitMask' in document.documentElement.style){
alert('支持mask');
} else {
alert('不支持mask');
}
旋转屏幕时，字体大小调整的问题
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:100%;
}
transition闪屏
/*设置内嵌的元素在 3D 空间如何呈现：保留3D */
-webkit-transform-style: preserve-3d;
/* 设置进行转换的元素的背面在面对用户时是否可见：隐藏 */
-webkit-backface-visibility:hidden;
圆角bug
某些Android手机圆角失效
background-clip: padding-box;
本站文章均为深正网站建设摘自权威资料，书籍，或网络原创文章，如有版权纠纷或者违规问题，请即刻联系我们删除，我们欢迎您分享，引用和转载，但谢绝直接搬砖和抄袭！感谢...
