• 移动端css优化
  • Artiely
  • #css
  • 2017-06-06
  • 135
  • 1 min read
  • loading...

ios 下定位的层如果有表单,在输入时键盘弹起,表单的光标不会跟随(系统bug)

解决办法:有表单数据尽量在页面完成,不用类似popup的浮层

ios 下滑动不平滑

html,
body {
  -webkit-overflow-scrolling: touch;
}
复制成功
1
2
3
4

ios 下表单的默认外观样式

input select{
  -webkit-appearance: none;
}
复制成功
1
2
3

禁止ios 长按时不触发系统的菜单,禁止ios&android长按时下载图片

.css{-webkit-touch-callout: none}
复制成功
1

禁止ios和android用户选中文字

.css{-webkit-user-select:none}
复制成功
1

消除transition闪屏

.css{
/*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/
-webkit-transform-style: preserve-3d;
/*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/
-webkit-backface-visibility: hidden;
}
复制成功
1
2
3
4
5
6

开启硬件加速

解决页面闪白
保证动画流畅

.css {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}
复制成功
1
2
3
4
5
6

文字超出隐藏

// 文字超出两行隐藏
.textover2{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height:1.5;
}
// 文字超出一行隐藏
.textover1{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14

清浮动

// 清浮动
.clearfix{
  &:after{
    content:'';
    height: 0;
    display: block;
    overflow: hidden;
    clear: both;
  }
}
复制成功
1
2
3
4
5
6
7
8
9
10