The front-end Css reset(less) style is reset

Css reset(less)

@charset "utf-8";

*{margin: 0;padding: 0;}
html {line-height: 1.15;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;}
body {margin: 0;padding: 0} 
article,aside,footer,header,nav,section {display: block;}
h1 {font-size: 2em;margin: 0.67em 0;}
figcaption,figure,main {display: block;}
figure {margin: 1em 40px;}
hr {box-sizing: content-box;height: 0;overflow: visible;}
pre {font-family: monospace, monospace;font-size: 1em;}
a {background-color: transparent;-webkit-text-decoration-skip: objects;}
abbr[title] {border-bottom: none;text-decoration: underline;text-decoration: underline dotted}
b,strong {font-weight: inherit;}
b,strong {font-weight: bolder;}
code,kbd,samp {font-family: monospace, monospace;font-size: 1em}
dfn {font-style: italic}
mark {background-color: #ff0;color: #000}
small {font-size: 80%}
sub,sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline}
sub {bottom: -0.25em}
li{list-style: none}
sup {top: -0.5em}
audio,video {display: inline-block}
audio:not([controls]) {display: none;height: 0}
img {border-style: none}
svg:not(:root) {overflow: hidden;}
button,input,optgroup,select,textarea {font-family: sans-serif;font-size: 100%;line-height: 1.15;margin: 0;}
button,input {overflow: visible;}
button,select {text-transform: none;}
button,html [type="button"],[type="reset"],[type="submit"] {-webkit-appearance: button;}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {border-style: none;padding: 0;}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring { outline: 1px dotted ButtonText;}
fieldset {padding: 0.35em 0.75em 0.625em}
legend {box-sizing: border-box;color: inherit;display: table;max-width: 100%;padding: 0;white-space: normal;}
progress {display: inline-block;vertical-align: baseline;}
textarea {overflow: auto;}
[type="checkbox"],[type="radio"] {box-sizing: border-box;padding: 0;}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {height: auto;}
[type="search"] {-webkit-appearance: textfield;outline-offset: -2px;}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration { -webkit-appearance: none;}
::-webkit-file-upload-button {-webkit-appearance: button;font: inherit;}
details,menu {display: block;}
summary {display: list-item;}
canvas {display: inline-block;}
template {display: none;}
[hidden] {display: none;}
/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,
blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,
legend,input,button,textarea,menu {margin: 0;padding: 0;box-sizing: border-box;}
/* 禁止选中文本 */
.usn{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}
/* 浮动 */
.fl { float: left; }
.fr { float: right; }
.fn { float: none; }
/* 清浮动 */
.cf:before,.cf:after {display: table; content: " ";}
.cf:after {clear: both;}
.cf {*zoom: 1; overflow: hidden;}
/* 元素类型 */
.db { display: block; }
.dn { display: none; }
.di { display: inline }
.dib {display: inline-block;}
.transparent { opacity: 0 }
/*文字排版、颜色*/
.fs12 { font-size:12px }
.fs14 { font-size:14px }
.fs16 { font-size:16px }
.fs18 { font-size:18px }
.fs20 { font-size:20px }
.fwb { font-weight:bold }
.fwn { font-weight:normal }
.t2 { text-indent:2em }
.red,a.red { color:#cc0031 }
.darkblue,a.darkblue { color:#039 }
.gray,a.gray { color:#878787 }
.lh150 { line-height:150% }
.lh180 { line-height:180% }
.lh200 { line-height:200% }
.tdu { text-decoration:underline; }
.tdn { text-decoration:none; }
.tal { text-align: left; }
.tac { text-align: center; }
.tar { text-align: right; }
.taj { text-align: justify; text-justify: inter-ideograph; }
.wn { /* 强制不换行 */word-wrap:normal;white-space:nowrap;}
.wb { /* 强制换行 */white-space:normal;word-wrap:break-word;word-break:break-all;}
.wp { /* 保持空白序列*/overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;}
.wes { /* 多出部分用省略号表示 , 用于一行 */overflow:hidden;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;}
.wes-2 { /* 适用于webkit内核和移动端 */display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.wes-3 {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
.wes-4 {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;}
.w100{width: 100%}.h100{height: 100%}
/* 溢出样式 */
.oh { overflow: hidden; }
.os {overflow: scroll; }
.oa {overflow: auto; }.ov {overflow: visible; }
/* 定位方式 */
.ps {position: static; }
.pr {position: relative;zoom:1; }
.pa {position: absolute; }
.pf {position: fixed; }
/* 垂直对齐方式 */
.vt {vertical-align: top; }
.vm {vertical-align: middle; }
.vb {vertical-align: bottom; }
/* 鼠标样式 */
.cd {cursor: default; }
.cp {cursor: pointer; }
.ch {cursor: help; }
.cm {cursor: move; }
.cn {cursor: no-drop; }
/* flex布局 */
.df-sb {display:flex;align-items: center;justify-content: space-between;}
.df-sa {display:flex;align-items: center;justify-content: space-around;}
/* 垂直居中 */
.df-c {display: flex;align-items: center;justify-content: center;}
.tb-c {text-align:center;display:table-cell;vertical-align:middle;}
.ts-c {position: absolute;left: 50%; top: 50%;transform: translate(-50%, -50%);}
.ts-mc {position: absolute;left: 0;right: 0;bottom: 0; top: 0;margin: auto;}
/* 辅助 */
.mask-fixed-wrapper {width: 100%;height: 100%;position: fixed;left:0;top:0;background: rgba(0, 0, 0, 0.65);z-index: 999;}
.bg-cover {background-size: cover;background-repeat: no-repeat;background-position: center center;}
.bg-cover-all {background-size: 100% 100%;background-repeat: no-repeat;background-position: center center;}

.t(@num){top:@num}
.r(@num){right:@num}
.b(@num){bottom:@num}
.l(@num){left:@num}
/*宽高*/
.w(@width){width:@width}
.h(@height){height:@height}
/*外边距*/
.m(@value){margin:@value}
.mt(@value){margin-top: @value}
.mb(@vlaue){margin-bottom: @vlaue}
.ml(@value){margin-left: @value}
.mr(@value){margin-right: @value}
/*内边距*/
.p(@value){padding:@value}
.pt(@value){padding-top: @value}
.pb(@vlaue){padding-bottom: @vlaue}
.pl(@value){padding-left: @value}
.pr(@value){padding-right: @value}
/*边框*/
.bo(@color){border:@color}
.b_r(@brrvalue){border-radius: @brrvalue}
.bo_t(@btVal){border-top: @btVal}
.bo_r(@brVal){border-right: @brVal}
.bo_b(@bbVal){border-bottom: @bbVal}
.bo_l(@blVal){border-left: @blVal}
/*字体*/
.fs(@val:.12rem){font-size: @val}
.fw(@val:bold){font-weight: @val}
.c(@color){color: @color}
.lh(@h){line-height: @h;}
.ta(@v){text-align: @v}
/*背景*/
.bc(@color){background-color:@color}
.bi(@url){background-image:@url}
.bsc{background-size: contain}
/*CSS3*/
.transition(@time:0.3s,@effect:ease-in-out){
    transition: All @time @effect;
    -webkit-transition: All @time @effect; 
    -moz-transition: All @time @effect; 
    -o-transition: All @time @effect;
}
.transform_scale(@value:1.2){
    transform: scale(@value,@value);
    -webkit-transform: scale(@value,@value);
    -moz-transform: scale(@value,@value);
    -o-transform: scale(@value,@value);
    -ms-transform: scale(@value,@value)
}
.transform_rotate180{
    transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -o-transform:rotate(180deg);
}
/*多出部分用省略号表示 用于一行*/
.wes(@wid){overflow:hidden;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;width: @wid}

/*input btn common style*/
.on{outline: none}

//变量
@100:100%; 
@l:left; 
@r:right; 
@c:center;
@color:#337AB7;

/*CSS下rem布局页面 出现页面抖动问题的处理*/
@media (min-width: 320px){html{font-size: 42.6667px;} }
@media (min-width: 360px){html{font-size: 48px;} }
@media (min-width: 375px){html{font-size: 50px;} }
@media (min-width: 384px){html{font-size: 51.2px;} }
@media (min-width: 414px){html{font-size: 55.2px;} }
@media (min-width: 448px){html{font-size: 59.7333px;} }
@media (min-width: 480px){html{font-size: 48px;} }
@media (min-width: 512px){html{font-size: 68.2667px;} }
@media (min-width: 544px){html{font-size: 72.5333px;} }
@media (min-width: 576px){html{font-size: 76.8px;} }
@media (min-width: 608px){html{font-size: 81.0667px;} }
@media (min-width: 640px){html{font-size: 85.3333px;} }
@media (min-width: 750px){html{font-size: 100px;} }
Copy the code

rem(750).js

fnResize() window.onresize = function () { fnResize() } function fnResize () { var deviceWidth = document.documentElement.clientWidth || window.innerWidth if (deviceWidth >= 750) { deviceWidth = 750 } if (deviceWidth < = 320), 320} {deviceWidth = document. The documentElement. The style.css. FontSize = (deviceWidth / 7.5) + 'px'}Copy the code

This article draws lessons from notes arranged on the basis of the article of a great bull ~