移动端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);
}