移动端CSS常用小结

1. Meta标签

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=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线（0.5px线），采用伪类+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);
}

15. gradient过渡兼容

 background:-moz-linear-gradient(top, #FFFFFF, #000000);
    background:-webkit-linear-gradient(top, #FFFFFF, #000000);
    background:-ms-linear-gradient(top, #FFFFFF, #000000);
    background:linear-gradient(top, #FFFFFF, #000000);
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFFFFF, endColorstr=#000000)";
    +background:#f9f9f9;/*ie6、7*/

16. H5消除transition闪屏

.css { 
    -webkit-transform-style: preserve-3d; 
    -webkit-backface-visibility: hidden; 
    -webkit-perspective: 1000; 
} 

17. Android设备 line-height垂直居中偏移

Android设备line-height垂直居中的要求是：字体大小为被2整除的整数且不可小于12px，可以设置元素的伪类，改变margin-top的值使元素居中显示

 .btn{
	  display: inline-block;
      height: 50px;
      line-height: 50px;
      padding: 0 20px;
      font-size: 14px;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 2px;
      color: #333;
      &::before {
          content: '';
          display: inline-block;
          vertical-align: middle;
          width: 0;
          height: 100%;
          margin-top: 3px;
        }
    }

18. Chrome支持小于12px 的文字

-webkit-text-size-adjust:none;

19. 字体变清晰变细

 -webkit-font-smoothing: antialiased;

20. 图片加载错误隐藏边框

img[src=""],img:not([src]){
	opacity: 0;
 }