移动端css初始化样式

/ 公共样式 /
/1.样式重置/
html,
body,
ul,
li,
img,
a,
p,
div,
form,
input {

padding: 0;
margin: 0;
/*设置盒模型*/
box-sizing: border-box;
/*去除移动端特有的点击高亮效果*/
-webkit-tap-highlight-color: transparent;

}

body {

font-family: "微软雅黑", sans-serif;
font-size: 13px;

}
a,
a:hover {

color: #666;
text-decoration: none;

}
ul {

list-style: none;

}
input {

/*1.清除文本框获取焦点时默认的边框阴影*/
outline: none;
/*2.去除边框*/
border: none;
/*3.添加边框*/
border: 1px solid #ccc;

}
/2.添加新的样式/

.f_left {

float: left;

}
.f_right {

float: right;

}
.m_left10 {

margin-left: 10px;

}
.m_right10 {

margin-right: 10px;

}
.m_top10 {

margin-top: 10px;

}
.clearfix::before,
.clearfix::after {

content: "";
display: block;
height: 0;
line-height: 0px;
clear: both;
visibility: hidden;

}

common.scss

$title: #fe0;
$text1: #fc8c84;
$text2: #00a8e6;
$icon-border-radius: 0.3rem;
$browser-default-font-size: 100 !default;
@mixin f-m {
    font-weight: 600;
}

@mixin f-b {
    font-weight: bold;
}

@mixin base {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

@mixin gradientToBottom($topColor, $bottomColor) {
    background: linear-gradient(to bottom, $topColor, $bottomColor);
}

@mixin gradientToRight($leftColor, $rightColor) {
    background: linear-gradient(to right, $leftColor, $rightColor); /* 标准的语法 */
}

// 单行省略
@mixin ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// 多行省略
@mixin ellipsisMore($row) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $row;
    -webkit-box-orient: vertical;
}

// 垂直居中
@mixin v_middle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

@mixin ios-scoll {
    -webkit-overflow-scrolling: touch;
}

@mixin button {
    padding: 0;
    border: 0;
    margin: 0;
    background: transparent;
}
@mixin d-flex{
        // display: box;              /* OLD - Android 4.4- */
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;     /* NEW - Chrome */
        display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
@mixin flex1 {
    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
@mixin fc-direction {
    -webkit-box-orient: vertical; 
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
}
@mixin flex-hc{
     /* 09版 */
  -webkit-box-pack: center;
  /* 12版 */
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
}
@mixin justify_content__flex_start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
@mixin justify_content__space_between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
@mixin flex-vc{
    /* 09版 */
  -webkit-box-align: center;
  /* 12版 */
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
}
@mixin align_items__flex_start {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
@mixin page {
    width: 100%;
    height: 100%;
    @include d-flex;
    @include fc-direction;
}
@mixin overPoint{
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@mixin overSecondPoint{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
@mixin v-s {
    flex: 1;
    overflow-y: auto;

    @include ios-scoll;
}

%img {
    font-size: 0;
    line-height: 0;
}

%secTitle {
    font-size: 0.34rem;
    color: #101535;

    @include f-b;
}

@mixin boxShadow($distance, $spread, $size, $angle, $color, $opacity) {
    // x = $distance*cos(180 - $angle)
    // y = $distance * sin(180 - $angle)
    // spread = $size * $spread
    // blur = $size - $spread
    // color = $rgba($color,$opacity)
    // box-shadow: x y blur spread color;

    // $rgba = $rgba($color,$opacity);
    // box-shadow: 4.09px 2.87px 9.4px 0.6px rgba(118, 113, 113, .75);
    box-shadow: rem($distance * cos(rad(180 - $angle))) rem($distance * sin(rad(180 - $angle))) rem($size * (1 - $spread)) rem($size * $spread) rgba($color, $opacity);
}
@function rem($px) {
    @return $px / $browser-default-font-size * 1rem;
}
@function fact($number) {
    $value: 1;

    @if $number > 0 {
        @for $i from 1 through $number {
            $value: $value * $i;
        }
    }

    @return $value;
}
@function pow($number, $exp) {
    $value: 1;

    @if $exp > 0 {
        @for $i from 1 through $exp {
            $value: $value * $number;
        }
    }
    @else if $exp < 0 {
        @for $i from 1 through -$exp {
            $value: $value / $number;
        }
    }

    @return $value;
}
@function pi() {
    @return 3.14159;
}

@function rad($angle) {
    $unit: unit($angle);
    $unitless: $angle / ($angle * 0 + 1);

    // If the angle has 'deg' as unit, convert to radians.
    @if $unit == deg {
        $unitless: $unitless / 180 * pi();
    }

    @return $unitless;
}
@function sin($angle) {
    $sin: 0;
    $angle: rad($angle);

    // Iterate a bunch of times.
    @for $i from 0 through 10 {
        $sin: $sin + pow(-1, $i) * pow($angle, 2 * $i + 1) / fact(2 * $i + 1);
    }

    @return $sin;
}

@function cos($angle) {
    $cos: 0;
    $angle: rad($angle);

    // Iterate a bunch of times.
    @for $i from 0 through 10 {
        $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i);
    }

    @return $cos;
}

@function tan($angle) {
    @return sin($angle) / cos($angle);
}

@mixin f-m {
    font-weight: 600;
}

@mixin f-b {
    font-weight: bold;
}

@mixin base {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

@mixin gradientToBottom($topColor, $bottomColor) {
    background: linear-gradient(to bottom, $topColor, $bottomColor);
}

@mixin gradientToRight($leftColor, $rightColor) {
    background: linear-gradient(to right, $leftColor, $rightColor);

    /* 标准的语法 */
}

@mixin boxShadow($distance, $spread, $size, $angle, $color, $opacity) {
    box-shadow: rem($distance * cos(rad(180 - $angle))) rem($distance * sin(rad(180 - $angle))) rem($size * (1 - $spread)) rem($size * $spread) rgba($color, $opacity);
}

// 单行省略
@mixin ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// 多行省略
@mixin ellipsisMore($row) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $row;
    -webkit-box-orient: vertical;
}

// 垂直居中
@mixin v_middle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

@mixin ios-scoll {
    -webkit-overflow-scrolling: touch;
}

@mixin button {
    padding: 0;
    border: 0;
    margin: 0;
    background: transparent;
}

@mixin page {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

@mixin v-s {
    flex: 1;
    overflow-y: auto;

    @include ios-scoll;
}

%img {
    font-size: 0;
    line-height: 0;
}

%secTitle {
    font-size: 0.36rem;
    color: #222222;

    @include f-b;
}