记录下常用cssrest script

手机端

*{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-height: 100000px;
}
*:before,*:after{max-height: 100000px}
html {
  -webkit-user-select: none; /* 禁止选择文字 */
  -webkit-touch-callout: none;  /* 禁止长按系统默认菜单 */
  -webkit-text-size-adjust: 100%;
  list-style-type:none;
  height: 100%;
}
body {
  font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
  line-height: 1.5;
  color: #333;
  background-color: #f2f2f2;
  font-size: .24rem;
  height: 100%;
  /*防止长按出现阴影*/
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
}
a,input,textarea,select,button {
  outline: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}
a {
  text-decoration: none;
}
a:active {
  outline: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}
h1,h2,h3,h4,h5,h6 {
  font-size: 100%;
  font-weight: 500
}
em {
  font-style: normal;
}
table {
  border-collapse: collapse;
  border-spacing: 0
}
img, input, button {
  border: none;
}
li {
  list-style: none;
}


img {
  vertical-align: top;
  max-width: 100%;
  height: auto;
}
input,textarea,select,button {
  border-radius: 0;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
  -webkit-appearance: button;
}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}


.clear:after { content:''; display:block; clear:both; }
.clear { zoom:1; }


.ellipsis2 {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break:break-all;
}


.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


.bread-word {
  word-wrap:break-word;

}

pc端：

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0}
fieldset,img {border:0 none}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {vertical-align:middle}
button {border:0 none;background-color:transparent;cursor:pointer}
body {background:#fff}
body,th,td,input,select,textarea,button {font-size:12px;line-height:1 ;font-family:"微软雅黑", "黑体","宋体";color:#666}
a {color:#666;text-decoration:none}
a:active, a:hover {text-decoration:none}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}
caption {display:none;}
table {width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;}
img{vertical-align:top}


a {outline: none;}
a:active {star:expression(this.onFocus=this.blur());}


.clear:after { content:''; display:block; clear:both; }
.clear { zoom:1; }


.fl{ float: left}

.fr{ float: right}

弹性布局box：

.ub {
display: -webkit-box!important;
display: box!important;
position: relative
}


.ub-rev {
-webkit-box-direction: reverse;
box-direction: reverse
}


.ub-fh {
width: 100%
}


.ub-fv {
height: 100%
}


.ub-con {
position: absolute;
width: 100%;
height: 100%
}


.ub-ac {
-webkit-box-align: center;
box-align: center
}


.ub-ae {
-webkit-box-align: end;
box-align: end
}


.ub-pc {
-webkit-box-pack: center;
box-pack: center
}


.ub-pe {
-webkit-box-pack: end;
box-pack: end
}


.ub-pj {
-webkit-box-pack: justify;
box-pack: justify
}


.ub-ver {
-webkit-box-orient: vertical;
box-orient: vertical
}


.ub-f1 {
position: relative;
-webkit-box-flex: 1;
box-flex: 1
}


.ub-f2 {
position: relative;
-webkit-box-flex: 2;
box-flex: 2
}


.ub-f3 {
position: relative;
-webkit-box-flex: 3;
box-flex: 3
}


.ub-f4 {
position: relative;
-webkit-box-flex: 4;
box-flex: 4
}


.clearfix:after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;

}

手机端适应方案

<script>!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};returne[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});vari=window;t["default"]=i.flex=function(normal,e,t){vara=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=normal?1:1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=normal?"50px": a/2*s*n+"px"},e.exports=t["default"]}]); flex(false,100, 1);</script>

https://segmentfault.com/a/1190000007350680