移动端适配

1px边框问题使用

.xx{
    position:relative;
}
.xx:before{
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #ccc;
    width: 200%;
    height: 200%;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
}

背景图裁切

.xx{
    background-image:url('...');
    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;
}

横向滚动

.parent{
    display: -webkit-box;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; 
    /* 弹性滑动 */
}

单行显示，超过省略号

.xx{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

两行显示，超过省略号

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