reset.css

130 阅读1分钟
html {

    -webkit-tap-highlight-color: transparent;

    overflow-x: hidden;

    min-width: 6.4rem;

    font-size: 312.5%;

}

body {

    color: #333;

    font-size: .28em;

    line-height: 1.5;

    font-family: arial, Microsoft Yahei;

    background: #f2f2f2;

    webkit-touch-callout: none;

    -webkit-user-select: none;

}

body, header, footer, section, div, span, p, img, a, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, em, i, b, u, del, menu, nav, fieldset, legend, article, aside, details, figcaption, hgroup, pre, code, from, blockquote, th, td, tr, hr, table, img, figure, button, input, textarea {

    margin: 0;

    padding: 0;

    webkit-touch-callout: none;

    -webkit-text-size-adjust: none;

}

@media screen and (min-width: 410px) {

    html {

        font-size: 345%;

    }

}

@media screen and (min-width: 480px) {

    html {

        font-size: 469%;

    }

}

@media screen and (min-width: 640px) {

    html {

        font-size: 625%;

    }

}

@media screen and (min-width: 645px) and (-webkit-device-pixel-ratio: 3){/*兼容全屏*/

    html {

        font-size: 615%;

    }

}

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */

    html {

        font-size: 260%;

    }

}

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */

    html {

        font-size: 260%;

    }

}

@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 Plus */

    html {

       font-size: 350%;

    }

}

.more-txt-cut1 {

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 1;

    -webkit-box-orient: vertical

}

.center-self-xy {

    position: absolute;

    left: 50%;

    top: 50%;

    -webkit-transform: translate(-50%,-50%);

    transform: translate(-50%,-50%)

}

.center-self-x {

    position: absolute;

    left: 50%;

    -webkit-transform: translateX(-50%);

    transform: translateX(-50%)

}

.center-self-y {

    position: absolute;

    top: 50%;

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%)

}

/* 滑动栏滑动顺畅且没有滚动条 */

.scroll {

    overflow-x: scroll;

    -webkit-overflow-scrolling: touch;

    overflow-scrolling: touch;

}

::-webkit-scrollbar {

    width: 0px;

}

.scroll::scrollbar{

    background-color:transparent;

    height: 0;

}

.scroll::-webkit-scrollbar{

    background-color:transparent;

    height: 0;

}

.scroll::-moz-scrollbar{

    background-color:transparent;

    height: 0;

}

.scroll::-o-scrollbar{

    background-color:transparent;

    height: 0;

}

.scroll::-ms-scrollbar{

    background-color:transparent;

    height: 0;

}

// 动画 进入页面 出页面 元素需要绝对定位
.fadeIn {
  transform:  'translateX(0)', 
  opacity:1, 
  transition: 'all 0.6s ease 0.3s'
}
.fadeOut {
  transform:'translateX(-120%)', 
  opacity:0.1, 
  transition:'all 0.3s'}
}