二话不说,上样式~
/*== reset start ==*/
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 {
padding: 0;
margin: 0;
/*
-webkit-user-select: none;
user-select: none;
*/
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6,section,article {
-webkit-text-size-adjust: none;
}
body {
font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif,"microsoft yahei";
// 移动端用此行样式,修正文字 line-height 不居中的问题
// font-family: -apple-system-font,PingFangSC,Microsoft Yahei,Heiti SC,miui,sans-serif,arial,helvetica;
word-break: break-all;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block;
}
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 {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
a,img {
text-decoration: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
}
a,input,img,select {
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 {
opacity: 0;
}
/*
::-webkit-scrollbar {
display: none;
}
*/
img {
-webkit-touch-callou: none;
}
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
/*== reset-end ==*/
/*== rem start ==*/
html {
font-size: 20px;
}
@media screen and (max-width:320px) {
html {
font-size: 20px !important;
}
}
@media screen and (min-width:320px) {
html {
font-size: 20px;
}
}
@media screen and (min-width:340px) {
html {
font-size: 21.25px;
}
}
@media screen and (min-width:360px) {
html {
font-size: 22.5px;
}
}
@media screen and (min-width:380px) {
html {
font-size: 23.75px;
}
}
@media screen and (min-width:400px) {
html {
font-size: 25px;
}
}
@media screen and (min-width:440px) {
html {
font-size: 27.5px;
}
}
@media screen and (min-width:480px) {
html {
font-size: 30px;
}
}
@media screen and (min-width:520px) {
html {
font-size: 32.5px;
}
}
@media screen and (min-width:560px) {
html {
font-size: 35px;
}
}
@media screen and (min-width:600px) {
html {
font-size: 37.5px;
}
}
@media screen and (min-width:640px) {
html {
font-size: 40px;
}
}
html {
font-size: 100vw/16;
}
/*== rem end ==*/
/*== normal cls ==*/
.show {
display: block !important;
}
.hide {
display: none !important;
}
.clearfix:after {
content: '';
overflow: hidden;
display: table;
height: 0;
clear: both;
}
/*== normal cls end ==*/