移动端reset.css 代码

之前在做pc端页面时，一直用的是淘宝的reset.css

了解到移动端的话，跟PC端又有些许不同，就又专门找了移动端的reset.css代码

有一个版本的就很不错

@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
address,cite,dfn,em,i,optgroup,var{font-style:normal}
table{border-collapse:collapse;border-spacing:0;text-align:left}
caption,th{text-align:inherit}
ul,ol,menu{list-style:none}
fieldset,img{border:0}
img,object,input,textarea,button,select{vertical-align:middle}
article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}
textarea{overflow:auto;resize:vertical}
input,textarea,button,select,a{outline:0 none;border: none;}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
mark{background-color:transparent}
a,ins,s,u,del{text-decoration:none}
sup,sub{vertical-align:baseline}
html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}
body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
a {color: #25a4bb;text-decoration: none;}

其中大家有注意到吗，html那一行的font-size的大小是50px；

为什么呢？

这是因为在移动端设备中，一般采用的是rem的布局方式
rem是要相对html的字号大小的，也就是相对于50像素
且一般移动端的设计稿给的都是二倍像素 这样就需要一定的计算 将设计稿中的px转换成rem单位

举个例子
设计图中高度是66px；
因为它是二倍的，因此其实我们代码中实际应该写成33px；
但是因为我们的单位变成了rem，所以要去计算 使得最后rem要等于实际的px大小 即33px；
rem单位的尺寸 * html中字号大小 = 33px; → rem = /字号大小 → rem = 33/50 = 0.66
66px → 0.66rem
是不是就很方便计算呢？

因此，如果是引入了这个reset.css的话，在后面书写css时直接像上面那样转换即可，非常简便呢~

(#^.#)