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

2016-11-11 1224 0 编辑:网页前端设计伍林 来源:网站开发书籍

本文主要介绍移动重构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;

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联