Pc、移动端公共样式

比较实用的移动端和pc端公共样式

为什么使用公共样式

使用公共样式能让我们在写pc和移动端代码的时候，代码可以高复用
使用方法，通过在class里面添加功能类

样式

1.移动端公共样式

body { background: #f1f0f6; }
.bd { border: 1px solid; }
.h100pc { height: 100%; }
.w100pc { width: 100%; }
.dsn { display: none; }
.fixed { position: fixed; }
.rel { position: relative; }
.abs { position: absolute; }
.tac { text-align: center; }
.lh15 { line-height: 1.5; }
// 颜色
.f999 { color: #999; }
.fff { color: #ffffff; }
// 背景颜色
.bg-green { background: green; }
.bg-gray { background: gray; }
.bg-fff { background: #ffffff; }

.f0 {font-size:0px}
.f2 {font-size:2px}
.f4 {font-size:4px}
.f6 {font-size:6px}
.f8 {font-size:8px}
.f10 {font-size:10px}
.f12 {font-size:12px}
.f14 {font-size:14px}
.f16 {font-size:16px}
.f18 {font-size:18px}
.f20 {font-size:20px}
.f22 {font-size:22px}
.f24 {font-size:24px}
.f26 {font-size:26px}

.mt-5 {margin-top: 5px;}
.mt-10 {margin-top: 10px;}
.mt-15 {margin-top: 15px;}
.mt-20 {margin-top: 20px;}
.mt-25 {margin-top: 25px;}
.mt-30 {margin-top: 30px;}

.ml-5 {margin-left: 5px;}
.ml-10 {margin-left: 10px;}
.ml-15 {margin-left: 15px;}
.ml-20 {margin-left: 20px;}
.ml-25 {margin-left: 25px;}
.ml-30 {margin-left: 30px;}

.pl-5 {padding-left: 5px;}
.pl-10 {padding-left: 10px;}
.pl-15 {padding-left: 15px;}
.pl-20 {padding-left: 20px;}
.pl-25 {padding-left: 25px;}
.pl-30 {padding-left: 30px;}

.pt-5 {padding-top: 5px;}
.pt-10 {padding-top: 10px;}
.pt-15 {padding-top: 15px;}
.pt-20 {padding-top: 20px;}
.pt-25 {padding-top: 25px;}
.pt-30 {padding-top: 30px;}

.pr-5 {padding-right: 5px;}
.pr-10 {padding-right: 10px;}
.pr-15 {padding-right: 15px;}
.pr-20 {padding-right: 20px;}
.pr-25 {padding-right: 25px;}
.pr-30 {padding-right: 30px;}

// 水平居中,垂直居中
.fcc {
  display: flex;
  justify-content: center;
  align-items: center;
}
// 水平居中,垂直居中
.ifcc {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
// 垂直居中,两端对齐
.flex-sb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
// 垂直居中,分散对齐
.flex-sa {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
// 分配剩余空间
.fg1 { flex-grow: 1; }
.fg2 { flex-grow: 2; }
.flex { display: flex; }
.fd { flex-direction: column; }
.jc-s { justify-content: flex-start; }
.jc-c { justify-content: center; }
.jc-sb { justify-content: space-between; }
.jc-sa { justify-content: space-around; }
.ai-c { align-items: center; }

2.pc端公共样式
简单的样式清除

html {width: 100%;-webkit-text-size-adjust:none;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);height: 100%;}
body {width: 100%;height: 100%;font-size: 16px; color: #fff;line-height: 24px;background: #fff;min-height: 100%;font-family: 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;}
* {margin: 0;padding: 0;border: 0;}
ul,ul li,ol,li {list-style: none outside none;}
img {vertical-align: middle;border: none;width: 100%;}
i {font: inherit;}
input,select,option {vertical-align: middle;border-radius: 0px;-moz-appearance:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);outline: none;}
input[type="text"],input[type="button"],input[type="submit"],input[type="reset"] {-webkit-appearance: none;appearance: none;border-radius: 0;outline: none;}
.fl {float: left;display: inline;}
.fr {float: right;display: inline;}
h1,h2,h3,h4,h5,h6,i,strong {font-weight: normal;}
select::-ms-expand { display: none; }
a {color: #fff;text-decoration: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
a:hover {text-decoration: none;outline: none;}
.clear {clear: both;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {zoom: 1;display: block;_height: 1px;clear: both;}
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin: 0;padding: 0;