最新消息:欢迎大家来到小月博客

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

web前端 小月 950浏览 0评论

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

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

css

基础篇

一、编码

@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;

十七、其它最佳实践

慎用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/

本文转载自:http://www.xuanfengge.com/mobile-guide-page-refactoring-css-articles.html

转载请注明:小月博客 » 移动端网页重构指南 – CSS篇

一点心意×
 收藏 (1)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (2)

  1. 厉害,好多常见的真是值得收藏!加油
    么么哒11个月前 (02-23)回复
    • 嗯写的非常详细,我很喜欢这个文章
      小月11个月前 (02-24)回复
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册