css-reset-mobile.css

/*
css reset
*/

html{
    -webkit-tap-highlight-color: rgba(0,0,0,0);/*去掉触摸遮盖层*/
    -webkit-user-modify: read-write-plaintext-only;
    -webkit-user-select: none;/*禁止用户选择文字*/
}

/*设置所有盒子大小计算边框内*/
*
*:before,
*:after {
    box-sizing: border-box;
}

/*消除输入框的阴影和边框*/
input,textarea, select{
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    border: none;
}

/*
消除 transition 动画闪屏
移动 web 中常会使用到 transition 动画，在某些设备上会出现闪屏的现象
*/
.animate {
    /* .... */
    /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
    -webkit-transform-style: preserve-3d;
    /*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/
    -webkit-backface-visibility: hidden;
}

/*
弹性滚动
ios 设备上设置弹性滚动属性，可以使滚动更加流畅
*/
.scollable{
    overflow: auto;
    -webkit-overflow-scrolling: touch;/*滚动touch*/
}

/*
点击状态处理
reset 关闭了点击高亮（因为会延迟），需要使用伪元素实现点击高亮效果
*/
.active:before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: @color;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 600ms;
    transition: opacity 600ms;   /*加上动画显得更自然*/
}

.active:active:before{
    opacity: 1;
    -webkit-transition: opacity 150ms;
    transition: opacity 150ms;
}

/*
1px边框处理
*/
/*border 在底部*/
.has-border:after{
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    left: auto;
    bottom: auto;
    width: 1px;
    height: 100%;
    background-color: rgba(0, 0, 0, .12);
    display: block;
    z-index: 15;
}
html.pixel-ratio-2 & {
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
}
html.pixel-ratio-3 & {
    -webkit-transform: scaleX(0.33);
    transform: scaleX(0.33);
}