移动端css公共样式

html {
        font-size : 20px;
    }
    @media only screen and (min-width: 401px){
        html {
            font-size: 25px !important;
        }
    }
    @media only screen and (min-width: 428px){
        html {
            font-size: 26.75px !important;
        }
    }
    @media only screen and (min-width: 481px){
        html {
            font-size: 30px !important;
        }
    }
    @media only screen and (min-width: 569px){
        html {
            font-size: 35px !important;
        }
    }
    @media only screen and (min-width: 641px){
        html {
            font-size: 40px !important;
        }
    }
    
* {margin:0;padding:0;border: 0;-webkit-tap-highlight-color: rgba(0,0,0,0);outline: none;}
body{font-size:0.7rem;line-height:1;font-family: 'Microsoft Yahei','Sans-Serif','Arial'; color:#333333; min-width:320px;}
ul,ol,menu{list-style: none}
body>img{font-size:1em;line-height:1.5;word-wrap:break-word;-webkit-text-size-adjust:100%; -webkit-touch-callout: none}
img{border:none;vertical-align:middle;}
 /*img { pointer-events: none; } 禁止移动端浏览器长按对图片弹出保存 */
table {border-collapse:collapse;border-spacing:0}
a{text-decoration: none;cursor:pointer; color:#333333}
a:hover,a:visited,a:active,a:link{text-decoration: none;}
address,em,i{font-style: normal}
input,select,button{vertical-align: middle}
input,select,button,textarea{font-size:100%;font-family:inherit}
/*input{appearance:none;-webkit-appearance:none;}*/
input[type=text] {background-color:#fff;border:1px solid #ccc;box-shadow: 0 0 0 rgba(0,0,0,0); border:none}
input,textarea{resize:none;outline:none;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, main {
    display: block;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* 去除IOS按钮美化 */
input[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: none;
}
/* 去除链接背景阴影 */
span,em,
a,img,button,input,textarea{-webkit-tap-highlight-color:rgba(255,255,255,0);}
li{list-style:none}
li,span,em{cursor:pointer;}  /* 解决ios下点击无效 */  
.bono{border:none !important}

.txt-r{text-align: right}
.txt-c{text-align: center}
.f-l {float:left}
.f-r {float:right}
.t-r {text-align:right}
.t-l {text-align:left}
.t-c {text-align:center}
.fn {float:none}
.rel {position:relative}
.abs {position:absolute}
.mg0{ margin:0 !important}
.pa0{ padding:0 !important}
.mg05{ margin:0.5rem}
.ml05{ margin-left:0.5rem}
.mr05{ margin-right:0.5rem}
.mt10{ margin-top:0.5rem}
.mt24{ margin-top:2.5rem}
.mb10{margin-bottom:0.5rem}
.pb3{padding-bottom:3rem}
.mb3{margin-bottom:3rem}
.mt15{margin-top: 0.4rem;}
.ib {display:inline-block}
.c-fix:after {content:"\0020";display:block;visibility:hidden;clear:both}
.clear{clear:both;}
.fix-f {float:left;width:100%}
.fw {font-family:Microsoft YaHei}
.brdtop{border-top:0.05rem solid #d9d9d9}
.brdbom{border-bottom:0.05rem solid #d9d9d9}
.brdleft{border-left:0.05rem solid #d9d9d9}
.box{-moz-box-sizing:border-box;box-sizing:border-box;}

/*公用类*/
.solid_rus{border:0.05rem solid #d9d9d9;border-radius:0.3rem; overflow:hidden}
/*圆角0.3rem*/
.radius_03{border-radius:0.3rem;}
.radius_50{border-radius:50%;}
.radius_01{border-radius:0.1rem;}

/*超出省略*/
.telpis{white-space: nowrap;overflow: hidden;text-overflow:ellipsis;}

/*公用宽度*/
.wd100{width: 100%;}
.wd25{width:25%}
.let38{width:3.85rem}
.lgin38{margin-left:3.85rem}
.wd30{width:30%}
.lgin30{margin-left:30%}
.wd50{width:50%}
.left_bg{float:left; width:2.1rem;height:2.5rem}

/*全屏背景*/
.Popup_bg{position:fixed;bottom: 0;left: 0;background: rgba(0,0,0,.6);z-index:100;width:100%;height:100%;overflow: hidden;cursor: pointer;}
.Popup_bg2{position:fixed;bottom: 0;left: 0;background: rgba(0,0,0,.6);z-index:100;width:100%;height:100%;overflow: hidden;cursor: pointer;}

.Popup_bgf0{position:fixed;bottom:0;left:0;background:#f0f0f6;z-index:9520;width:100%;height:100%;overflow:hidden;}

.Popup_cont{position: absolute;width: 100%;bottom: 0;background: #fff;-moz-box-sizing:border-box;box-sizing:border-box;}

.hlbg{height:0.5rem; background:#f0f2f5}


.bgff{background-color:#FFF}
.bgeb{background-color:#ebebeb}
.bgf2{background-color:#f0f2f5}
.bg54{background-color:#f0f0f6}

/*模糊*/
.blur{-webkit-filter: blur(0.8rem); -moz-filter: blur(0.8rem);-ms-filter: blur(0.8rem);filter: blur(0.8rem);}
.line-clamp{overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.justify { text-align: justify; text-justify: inter-ideograph;}

/*按钮*/
.btn{height:2.2rem;line-height:2.2rem; text-align:center;margin:0 auto;background:#32bcad;color:#FFF;font-size:0.75rem;border-radius:0.3rem;overflow:hidden; border:0.05rem solid #179b16}
.grey_btn{height:2.2rem;line-height:2.2rem; text-align:center;margin:0 auto;background:#1aad19;color:darkgrey; font-size:0.75rem;border-radius:0.3rem;overflow:hidden}
.btn1{height: 2.25rem;line-height: 2.25rem;text-align: center;display: block;margin: 0 auto; font-size: 1rem;border-radius: 0.1rem;border:none;letter-spacing: 0.05rem;background: #32bcad; color: #fff;}

/*call_off、取消、关闭*/
.call_off{height:2.2rem;line-height:2.2rem; text-align:center;margin:0 auto;background:#f8f8f8;color:#333333;font-size:0.75rem;border-radius:0.3rem;overflow:hidden; border:0.05rem solid #dfdfdf; width:90%; margin:1.5rem auto; display:block;z-index: 1000}

/*红点*/
.red_dot{position:absolute;top:0.15rem;right:0.35rem;border-radius:50%; background:#f43531; width:0.35rem;height:0.35rem;}

/*内部滚动*/
.potom0{ position:absolute;left:0;bottom:0;width:100%;}
.layout_box{overflow-y:scroll; position: absolute;left:0;top:0rem;bottom:0;width: 100%;z-index:1}
.scroll_ov {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    -moz-box-flex: 1;
         flex: 1;
    /*background-color: #fff;*/
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    -moz-overflow-scrolling: touch;
    -o-overflow-scrolling: touch;
    -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
}

/*弹出层背景*/
.pupbg{position:absolute;bottom:0;left:0;background:rgba(0, 0, 0, 0.6);z-index:999;width:100%;overflow:hidden;height:100%}


/*底部*/
.footer{height:2.5rem;position:fixed;bottom:0;left:0;right:0;z-index:99;}

/*提示框*/
.deploy_ctype_tip{
    z-index:1001;
    width:100%;
    text-align:center;
    position:fixed;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.deploy_ctype_tip p{
    display:inline-block;
    padding:0.25rem 0.5rem;
    border:solid #f2514a 0.05rem;
    background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
    font-size:0.8rem;
    font-weight: 400;
    color: #fff;
    font-size:0.7rem;
    line-height: 1.5;
    border-radius: 1rem;
}

.deploy_ctype_tip1{
    z-index:1001;
    width:100%;
    height:100%;
    background-color: rgba(0, 0, 0, 0.01);
    text-align:center;
    position:fixed;
    left:0;
}
.deploy_ctype_tip1 p{
    display:inline-block;
    padding:0.25rem 0.5rem;
    border:solid #f2514a 0.05rem;
    background: rgba(0, 0, 0, 0.6) ;
    font-size:0.8rem;
    font-weight: 400;
    color: #fff;
    font-size:0.7rem;
    line-height: 1.5;
    border-radius: 1rem;
    position: fixed;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

//错误提示

label.error{
    display: block;
    color: red;
    font-size: 0.6rem;
    line-height: 1rem;

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值