移动端CSS常用小结

1、Meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />

移动端页面添加meta标签，可以让文档的宽度与设备的宽度保持1:1，文档的最大宽度比例是1.0，不允许用户点击屏幕放大浏览。

2、禁止IOS自动识别电话和Android自动识别邮箱

<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content=“email=no"/>

3、禁止文本选择

-webkit-user-select:none

4、屏蔽输入框阴影，去掉按钮默认样式

-webkit-appearance:none

5、border-box

想要设置一个宽度100%的元素，又要设置元素固定的padding-left或padding-right，还有边框，就会出现水平滚动条，可以用box-sizing来解决。

*, *:before, *:after {
  -webkit-tap-highlight-color: transparent;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

6、css3多行文本换行

{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

7、字体不换行，溢出省略号

{
width:300px;
white-space: nowrap;
text-overflow:ellipsis; 
overflow:hidden; 
}

8、清除浮动

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
.clearfix {
  *zoom: 1;
}

9、表格内容自动换行

table-layout :fixed;word-break: break-all;word-wrap :break-word;

10、IOS快速回弹

在IOS上如果想让一个元素拥有像Native的滚动效果，可以这样写

overflow-y: scroll;
-webkit-overflow-scrolling: touch;

11、css3元素居中

translate3d实现方式

 position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate3d(-50%,-50%,0);/*IE9*/
    -moz-transform: translate3d(-50%,-50%,0);/*Firefox*/
    -webkit-transform: translate3d(-50%,-50%,0);/*Safari and Chrome*/
    -o-transform: translate3d(-50%,-50%,0);/*Opera*/
    transform: translate3d(-50%,-50%,0);

translate2d实现方式

position: absolute;
    top: 50%;
    left: 50%;
-ms-transform: translate(-50%,-50%);/*IE9*/
    -moz-transform: translate(-50%,-50%);/*Firefox*/
    -webkit-transform:translate(-50%,-50%);/*Safari and Chrome*/
    -o-transform: translate(-50%,-50%);/*Opera*/
    transform: translate(-50%,-50%);

12、Retina屏的移动设备实现1px线，采用伪类+transform的方式

.menu li{
	position: relative;
}
.menu li:after{
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: #E1E1E1;
  -webkit-transform: scaleY(0.5);
  -moz-transform: scaleY(0.5);
  -o-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

13、动态bar实现

<div class="i-default-bar">
     <div class="i-bar"></div> 
</div>

.i-default-bar {
height: 4px;
background: #EAEAEA;
border-radius: 1px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
-o-border-radius: 1px;
}
.i-bar {
height: 100%;
width: 0;
background: #FF8885;
border-radius: 1px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
-o-border-radius: 1px;
transition: all 1s linear;
-moz-transition: all 1s linear;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
}

$('.i-bar').css('width','50%');

14、aside-right menu动画

.aside {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  visibility: hidden;
  width: 100%;
  height: 100%;
  background: #fff;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}
.aside-vertical {
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 100;
}
.aside-right {
  visibility: visible;
  -webkit-transform: translate3d(100%, 0, 0);
  -moz-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
 -o-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}
.aside-right.aside-open {
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}