app的css公共样式的封装（rpx）(完整版)

@charset "utf-8";

/* 禁用iPhone中Safari的字号自动调整 */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    /* 解决IOS默认滑动很卡的情况 */
    -webkit-overflow-scrolling : touch;
}

/* 禁止缩放表单 */
input[type="submit"], input[type="reset"], input[type="button"], input {
    resize: none;
    border: none;
}

/* 取消链接高亮  */
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* 设置HTML5元素为块 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

/* 图片自适应 */
img {
    width: 100%;
    height: auto;
    width: auto9; /* ie8 */
    display: block;
    -ms-interpolation-mode: bicubic;/*为了照顾ie图片缩放失真*/
}

/* 初始化 */
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    margin: 0;
    padding: 0;
}
body {
    font: 12rpx/1.5 'Microsoft YaHei','宋体', Tahoma, Arial, sans-serif;
    color: #555;
    background-color: #F7F7F7;
}
em, i {
    font-style: normal;
}
ul,li{
    list-style-type: none;
}
strong {
    font-weight: normal;
}

.clearfix {
    zoom: 1;
}
a {
    text-decoration: none;
    color: #969696;
    font-family: 'Microsoft YaHei', Tahoma, Arial, sans-serif;
}
a:hover {
    text-decoration: none;
}
ul, ol {
    list-style: none;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-family: 'Microsoft YaHei';
}
img {
    border: none;
}
input{
    font-family: 'Microsoft YaHei';
}
/*单行溢出*/
.one-txt-cut{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/*多行溢出 手机端使用*/
.txt-cut{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* -webkit-line-clamp: 2; */
    -webkit-box-orient: vertical;
}
/* 移动端点击a链接出现蓝色背景问题解决 */
a:link,a:active,a:visited,a:hover {
    background: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}
.w50{
    width: 50%;
}
.w25{
    width: 25%;
}
.w20{
    width: 20%;
}
.w33{
    width: 33.333333%;
}

.block {
    display: block;
}
 
.inline-block {
    display: inline-block;
}
 
.display-none {
    display: none;
}
 
.overflow-hidden {
    overflow: hidden;
}
 
/* 弹性盒子 */

.flex {
    display: flex;
}
 
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.direction-row {
    flex-direction: row;
}
 
.direction-column {
    flex-direction: column;
}
 
.direction-row-reverse {
    flex-direction: row-reverse;
}
 
.direction-column-reverse {
    flex-direction: column-reverse;
}
 
.align-items-center {
    align-items: center;
}
 
.align-items-start {
    align-items: flex-start;
}
 
.align-items-end {
    align-items: flex-end;
}
 
.justify-center {
    justify-content: center;
}
 
.justify-start {
    justify-content: flex-start;
}
 
.justify-end {
    justify-content: flex-end;
}
 
.space-between {
    justify-content: space-between;
}
 
.space-around {
    justify-content: space-around;
}
 
.flex-warp {
    flex-wrap: wrap;
}
 
.flex-nowrap {
    flex-wrap: nowrap;
}
 
.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}
 
.flex1 {
    flex: 1;
}
/* 文字位置 */

.text-center {
    text-align: center;
}
 
.text-left {
    text-align: left;
}
 
.text-right {
    text-align: right;
}

/* 浮动 */

.float-left {
    float: left;
}
 
.float-right {
    float: right;
}
/* 清除浮动 */
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
}

/* 绝对定位 */

.position-relative {
    position: relative;
}
 
.position-relative {
    position: absolute;
}

/* 固定定位 */

.position-fixed {
    position: fixed;
}

.top0 {
    top: 0;
}
 
.left0 {
    left: 0;
}
 
.bottom0 {
    bottom: 0;
}
 
.right0 {
    right: 0;
}

/* 单行省略 */
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
 
/* 2行省略 */
.ellipsis2 {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
 
/* 3行省略 */
.ellipsis2 {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* 内外边距设置 */
.margin12 {
    margin: 12rpx;
}
 
.margin14 {
    margin: 14rpx;
}
 
.margin16 {
    margin: 16rpx;
}
 
.margin18 {
    margin: 18rpx;
}
 
.margin20 {
    margin: 20rpx;
}
 
.margin22 {
    margin: 22rpx;
}
 
.margin24 {
    margin: 24rpx;
}
 
.marginT12 {
    margin-top: 12rpx;
}
 
.marginT14 {
    margin-top: 14rpx;
}
 
.marginT16 {
    margin-top: 16rpx;
}
 
.marginT18 {
    margin-top: 18rpx;
}
 
.marginT20 {
    margin-top: 20rpx;
}
 
.marginT22 {
    margin-top: 22rpx;
}
 
.marginT24 {
    margin-top: 24rpx;
}
 
.marginL12 {
    margin-left: 12rpx;
}
 
.marginL14 {
    margin-left: 14rpx;
}
 
.marginL16 {
    margin-left: 16rpx;
}
 
.marginL18 {
    margin-left: 18rpx;
}
 
.marginL20 {
    margin-left: 20rpx;
}
 
.marginL22 {
    margin-left: 22rpx;
}
 
.marginL24 {
    margin-left: 24rpx;
}
 
.marginR12 {
    margin-right: 12rpx;
}
 
.marginR14 {
    margin-right: 14rpx;
}
 
.marginR16 {
    margin-right: 16rpx;
}
 
.marginR18 {
    margin-right: 18rpx;
}
 
.marginR20 {
    margin-right: 20rpx;
}
 
.marginR22 {
    margin-right: 22rpx;
}
 
.marginR24 {
    margin-right: 24rpx;
}
 
.marginB12 {
    margin-bottom: 12rpx;
}
 
.marginB14 {
    margin-bottom: 14rpx;
}
 
.marginB16 {
    margin-bottom: 16rpx;
}
 
.marginB18 {
    margin-bottom: 18rpx;
}
 
.marginB20 {
    margin-bottom: 20rpx;
}
 
.marginB22 {
    margin-bottom: 22rpx;
}
 
.marginB24 {
    margin-bottom: 24rpx;
}
 
.padding12 {
    padding: 12rpx;
}
 
.padding14 {
    padding: 14rpx;
}
 
.padding16 {
    padding: 16rpx;
}
 
.padding18 {
    padding: 18rpx;
}
 
.padding20 {
    padding: 20rpx;
}
 
.padding22 {
    padding: 22rpx;
}
 
.padding24 {
    padding: 24rpx;
}
 
.paddingT12 {
    padding-top: 12rpx;
}
 
.paddingT14 {
    padding-top: 14rpx;
}
 
.paddingT16 {
    padding-top: 16rpx;
}
 
.paddingT18 {
    padding-top: 18rpx;
}
 
.paddingT20 {
    padding-top: 20rpx;
}
 
.paddingT22 {
    padding-top: 22rpx;
}
 
.paddingT24 {
    padding-top: 24rpx;
}
 
.paddingL12 {
    padding-left: 12rpx;
}
 
.paddingL14 {
    padding-left: 14rpx;
}
 
.paddingL16 {
    padding-left: 16rpx;
}
 
.paddingL18 {
    padding-left: 18rpx;
}
 
.paddingL20 {
    padding-left: 20rpx;
}
 
.paddingL22 {
    padding-left: 22rpx;
}
 
.paddingL24 {
    padding-left: 24rpx;
}
 
.paddingR12 {
    padding-right: 12rpx;
}
 
.paddingR14 {
    padding-right: 14rpx;
}
 
.paddingR16 {
    padding-right: 16rpx;
}
 
.paddingR18 {
    padding-right: 18rpx;
}
 
.paddingR20 {
    padding-right: 20rpx;
}
 
.paddingR22 {
    padding-right: 22rpx;
}
 
.paddingR24 {
    padding-right: 24rpx;
}
 
.paddingB12 {
    padding-bottom: 12rpx;
}
 
.paddingB14 {
    padding-bottom: 14rpx;
}
 
.paddingB16 {
    padding-bottom: 16rpx;
}
 
.paddingB18 {
    padding-bottom: 18rpx;
}
 
.paddingB20 {
    padding-bottom: 20rpx;
}
 
.paddingB22 {
    padding-bottom: 22rpx;
}
 
.paddingB24 {
    padding-bottom: 24rpx;
}
 
.fontS12 {
    font-size: 12rpx;
}
 
.fontS14 {
    font-size: 14rpx;
}
 
.fontS16 {
    font-size: 16rpx;
}
 
.fontS18 {
    font-size: 18rpx;
}
 
.fontS20 {
    font-size: 20rpx;
}
 
.fontS22 {
    font-size: 22rpx;
}
 
.fontS24 {
    font-size: 24rpx;
}
 
.fontS26 {
    font-size: 26rpx;
}
 
.fontS28 {
    font-size: 28rpx;
}
 
.fontS30 {
    font-size: 30rpx;
}
 
.fontS32 {
    font-size: 32rpx;
}
 
.fontS34 {
    font-size: 34rpx;
}
 
.fontS36 {
    font-size: 36rpx;
}
 
.fontS38 {
    font-size: 38rpx;
}
 
.fontS40 {
    font-size: 40rpx;
}
 
.fontS42 {
    font-size: 42rpx;
}
 
 /* 字体样式,颜色,边框圆角, */
 .font-weight-bold {
     font-weight: bold;
 }
  
 .font-weight-normal {
     font-weight: normal;
 }
  
 .vertical-align-middle {
     vertical-align: middle;
 }
  
 .border-radius50 {
     border-radius: 50%;
 }
  
 .color-white {
     color: white;
 }
  
 .color-black {
     color: black;
 }
  
 .color-gray {
     color: gray;
 }
  
 .color-red {
     color: red;
 }
  
 .color-orange {
     color: orange;
 }
  
 .color-yellow {
     color: yellow;
 }
  
 .color-green {
     color: green;
 }
  
 .color-acua {
     color: aqua;
 }
  
 .color-blue {
     color: blue;
 }
  
 .color-purple {
     color: purple;
 }
  
 .width-100p {
     width: 100%;
 }
  
 .height-100p {
     height: 100%;
 }
  
 .width-100vw {
     width: 100vw;
 }
  
 .height-100vh {
     height: 100vh;
 }
 /* 手指 */
 .pointer {
     cursor: pointer;
 }
 

持续更新 1.0.0