CSS开头模板

CSS万金油模板开头

@charset "UTF-8";
body,h1,h2,h3,h4,h5,h6,p ,ul,ol,dd,table,input,textarea,dl{padding: 0;margin:0;}
a{text-decoration: none;}
img{vertical-align: top;border: 0;}
ul,li{list-style: none;}
input:focus,textarea:focus,select:focus{outline: none;}
textarea{resize:none;}
.cl:after{content: "";display: block;clear: both;height: 0;overflow: hidden;visibility: hidden;}
.cl{zoom:1;}
html,body{height: 100%;}
html{font-size:calc(100vw/7.5);}//移动端配置无则删除
body{display: flex;flex-direction:column;font-size: .24rem}
.left{
    float: left;
}
.right{
    float: right;
}
.centerimg{
    display: flex;
    justify-content: center;
    align-items: center;
}
.ov {
    overflow: hidden; /*超出部分隐藏*/
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    white-space: nowrap;
}

响应式开头模板

@media screen and (min-width:320px) and (max-width: 767px){body{background-color:#f00;}}
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

移动端自适应变化模板

@charset "UTF-8";
body,h1,h2,h3,h4,h5,h6,p ,ul,ol,dd,table,input,textarea,dl{padding: 0;margin:0;}
a{text-decoration: none;}
img{vertical-align: top;border: 0;}
li{list-style: none;}
input:focus,textarea:focus,select:focus{outline: none;}
textarea{resize:none;}
.cl:after{content: "";display: block;clear: both;height: 0;overflow: hidden;visibility: hidden;}
.cl{zoom:1;}
html,body{height: 100%;}
html{font-size:calc(100vw/7.5);}
body{display: flex;flex-direction:column;font-size: .24rem}
.left{
    float: left;
}
.right{
    float: right;
}