• Reset.scss

//pc body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td,section,a,input,span {margin:0; padding:0; } html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none; } html,body{-webkit-user-select: none; user-select: none; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; } body,input,textarea{font-family:"Microsoft YaHei"."Simsun",Arial; -webkit-font-smoothing: antialiased; } table {border-collapse:collapse; border-spacing:0; } fieldset,img {border:0} address,caption,cite,code,dfn,em,strong,th,var {font-style:normal; font-weight:normal} ol,ul {list-style:none} caption,th,td{text-align:center} h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal} q:before,q:after {content:' '} 
input[type=button],button{-webkit-appearance:none; -webkit-user-select:none; } a,input,img,select,textarea{outline: none; } input::-webkit-search-cancel-button {display: none; } input:focus::-webkit-input-placeholder,textarea:focus::-webkit-input-placeholder{opacity: 0; } img{-webkit-touch-callou:none; } .show{display:block ! important; } .hide,.none{display:none ! important; } /* clear */ .clearfix:before, .clearfix:after {content:""; display:table; } .clearfix:after {clear:both; } *.clearfix {zoom:1; } //------------------------------------------------------------------------------------------ //mobile body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td,section,a,input,span {margin:0; padding:0; -webkit-box-sizing:border-box; box-sizing:border-box; } html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none; } html,body{-webkit-user-select: none; user-select: none; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; } body,input,textarea{font-family:"Helvetica Neue", Helvetica, STHeiTi, sans-serif,"microsoft yahei"; -webkit-font-smoothing: antialiased; } table {border-collapse:collapse; border-spacing:0; } fieldset,img {border:0} address,caption,cite,code,dfn,em,strong,th,var {font-style:normal; font-weight:normal} ol,ul {list-style:none} caption,th,td{text-align:center} h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal} q:before,q:after {content:' '} 
input[type=button],button{-webkit-appearance:none; -webkit-user-select:none; } a, img, input, select, li {- its - tap - highlight - color: rgba (0,0,0,0); } a,img{text-decoration:none; - its - tap - highlight - color: rgba (0,0,0,0); -webkit-touch-callout:none; } a,input,img,select,textarea{outline: none; } input::-webkit-clear-button,input::-webkit-inner-spin-button,input::-webkit-outer-spin-button {-webkit-appearance: none; } input::-webkit-search-cancel-button {display: none; } input:focus::-webkit-input-placeholder,textarea:focus::-webkit-input-placeholder{opacity: 0; } ::-webkit-scrollbar{display:none; width: 0; } img{-webkit-touch-callou:none; {} * - its - tap - highlight - color: rgba (0,0,0,0); } .show{display:block ! important; } .hide,.none{display:none ! important; } /* clear */ .clearfix:before, .clearfix:after {content:""; display:table; } .clearfix:after {clear:both; } *.clearfix {zoom:1; }Copy the code

  • Mixin.scss

// Whether to move the terminal$isMobile:false; // prefix @mixin css3($property.$value...) { 
    @if $isMobile{
        @each $prefix in -webkit-,' ' { 
            #{$prefix}#{$property}: $value;}} @else{
        @each $prefix in -webkit-,-moz-,-ms-,-o-,' ' { 
            #{$prefix}#{$property}: $value;}}} @mixin box()$pack:start,$align:start,$orient:horizontal){
    display: -webkit-box;
    display: box;
    -webkit-box-pack: $pack;
    box-pack: $pack; 
    -webkit-box-align: $align;
    box-align: $align;
    -webkit-box-orient: $orient;
    box-orient: $orient; } @mixin pack-c{@include box($pack:center); } @mixin align-c{@include box($align:center); } @mixin box-c{@include box($pack:center,$align@mixin box-v{@include box();$orient} // Text overflow ellipsis display @mixin ellipsis($line: 1) {@if $line==1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    @else {
        display: -webkit-box;
        -webkit-line-clamp: $line; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }} @mixin transition($transition...). { @include css3(transition,$transition} // rotate position @mixin transform-origin($origin...). { @include css3(transform-origin,$origin} // transform @mixin transform($transform...). { @include css3(transform,$transform} @mixin animation($aniName...). { @include css3(animation,$aniName} @mixin animation-delay($time) {
    @include css3(animation-delay,$time} // mixin transition-delay($time) {
    @include css3(transition-delay,$time} // Animation definition @mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {  
        @content;  
    }  
    @-moz-keyframes #{$animationName} {  
        @content;  
    }  
    @-o-keyframes #{$animationName} {  
        @content;  
    }  
    @keyframes #{$animationName} {  @content; }} // Disable styles, add! important @mixin disabled($bgColor:#e6e6e6,$textColor:#ababab){
    background-color: $bgColor! important; color:$textColor! important; cursor: not-allowed ! important; pointer-events: none; } // unified button style @mixin btn-css($w: 110,$h: 36.$color:#fff,$bg:#00A2FF){display: block; width:$w+px; height:$h+px; background:$bg; color:$color; line-height: 0; text-align: center; &:hover{background:lighten($bg, 5%); } &:active{background:darken($bg, 5%); } &.dis{@include disabled(#d9d9d9,#fff); border:none; }} @mixin imgbox($w: 0.$h:0){
    width:$w; height:$h; overflow:hidden; img{display: block; width:100%; }}Copy the code

  • Mobile Media.scss

//page width
$designWidth: 640;
//px to rem
@function rem($px: 10) {@return $px/$designWidth*10rem;
}

html{font-size:$designWidth/10*1px; width:100%; } body{font-size:rem(28); margin:0 auto; width:100%; min-width:320px; } /*media*/ @for $i from 32 through $designWidth/ 10 {$index: 10;
    $j: $i*$index;
    @if $i==32{
        @media screen and (max-width:#{$j}px){
           html{font-size:($j/10) + px ! important; } } } @media screen and (min-width:#{$j}px) {
        html {
            @if $j> =$designWidth {
                font-size: ($j/10) + px ! important; } @else {
                font-size: ($j/10) + px
            }

        }
    }
}
html {font-size: $designWidth10 / /$designWidth*100vw; } / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- / / Gao Qingbing processing / / @ include 1 px border problems retina-border($position:relative){
//    border:1px solid #ddd;
//    border-radius:rem(3);
//    ...
//}
@mixin retina-border($position:relative,$class:before){ @media (-webkit-min-device-pixel-ratio: 2) { &{border:none; position:$position} & :#{$class}{
            content:""; position: absolute; left:0; top:0; width: 200%; height: 200%; pointer-events: none; z-index: -1; @include transform-origin(left top); @include transform(scale(.5)); @content; }}}Copy the code