pc端和移动端默认样式重置(rem布局)

首先说一下，为何要用重置样式

除了省心之外，还有两个好处

1.方便设计师/程序员发挥

白纸的感觉确实好。各种margin，padding，border的为0。。。

2.便于发现前端代码的遗漏

用了reset后，如果“blockquote、ol、ul、hn等语义元素在没有赋以其他合理的样式”，会非常扎眼（任何人都看得出来），开发者第一反应会是“卧槽忘了写”并迅速补救。并迅速补救。但如果没reset，浏览器会提供“勉强可以”的默认样式，很多人可能就发现不了或者会想“可能就这么设计的吧”，开发者即使意识到因为遗漏导致和设计稿不一致，出于人性弱点也可能会想“还要赶下一个项目呢先这么凑合着吧”——由于破窗效应，这可能会导致越来越多的“凑合着吧”

pc端:

*{
  box-sizing: border-box;
}    
html{font-family:"Microsoft YaHei UI","Microsoft YaHei",sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}  
    pre{font-family: "Microsoft YaHei" ;}
    html,body,div,object,iframe,applet,object,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,dl,dt,dd,ol,ul,li,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,menu,nav,output,ruby,section,summary,time,mark,audio,video,progress{margin:0;padding:0;border:0;vertical-align:baseline;box-sizing: border-box;}  
    li{list-style:none}  
    article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}  
    audio,canvas,progress,video{display:inline-block}  
    audio:not([controls]){display:none;height:0}  
    [hidden],template{display:none}  
    a{background-color:transparent;text-decoration:none}  
    a:active,a:hover{outline:0}  
    abbr[title]{border-bottom:1px dotted}  
    b,strong{font-weight:bold}  
    dfn{font-style:italic}  
    h1{font-size:2em;margin:.67em 0}  
    mark{background:#ff0;color:#000}  
    small{font-size:80%}  
    sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}  
    sup{top:-0.5em}  
    sub{bottom:-0.25em}  
    img{border:0;vertical-align: middle;}  
    svg:not(:root){overflow:hidden}  
    figure{margin:1em 40px}  
    hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}  
    pre{overflow:auto}  
    code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}  
    button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;outline:none;line-height:normal}  
    button{overflow:visible}  
    button,select{text-transform:none}  
    button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}  
    button[disabled],html input[disabled]{cursor:default}  
    button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}  
    input{line-height:normal}  
    input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}  
    input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}  
    input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-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}  
    fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}  
    legend{border:0;padding:0}  
    textarea{overflow:auto}  
    optgroup{font-weight:bold}  
    table{border-collapse:collapse;border-spacing:0}  
    td,th{padding:0}  
/* 清除ie表单自带icon*/
::-ms-clear,::-ms-reveal{display:none;}

/* 选择历史记录的文字颜色和背景颜色 */
input:-webkit-autofill {
    -webkit-animation: autofill-fix 1s infinite!important;
    /* 选择历史记录的文字颜色*/
    -webkit-text-fill-color: #666;
    -webkit-transition: background-color 50000s ease-in-out 0s!important;
    transition: background-color 50000s ease-in-out 0s!important;
    background-color: transparent!important;
    background-image: none !important;
    /* 选择历史记录的背景颜色 */
    -webkit-box-shadow: 0 0 0 1000px transparent inset!important;
}
[role=button], a, area, button, input:not([type=range]), label, select, summary, textarea {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}
input[type=number], input[type=password], input[type=text], textarea {
    -webkit-appearance: none;
}

移动端:

html{font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
*,*::before,*::after {margin: 0;padding: 0;box-sizing: border-box;
            /*移动端点击高亮效果的清除*/
            -webkit-tap-highlight-color: transparent;
            tap-highlight-color:transparent;}
html,body{-webkit-user-select:none;user-select:none;}
html,body,div,object,iframe,applet,object,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,dl,dt,dd,ol,ul,li,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,menu,nav,output,ruby,section,summary,time,mark,audio,video,progress{margin:0;padding:0;border:0;vertical-align:baseline;box-sizing: border-box;}
a{text-decoration:none;-webkit-touch-callout:none;background-color:transparent}
li{list-style:none}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block}
audio:not([controls]){display:none;height:0}
[hidden],template{display:none}
a:active,a:hover{outline:0}

/* 不同部分自行添加 */
a{text-decoration: none;}
blockquote, q { quotes: none;  }
blockquote:before, blockquote:after,
q:before, q:after {  content: '';  content: none;  }
table {  border-collapse: collapse;  border-spacing: 0;  }

abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
dfn{font-style:italic}
h1{font-size:2em;margin:.67em 0}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
img{border:0;-webkit-touch-callout:none;vertical-align: middle;}
svg:not(:root){overflow:hidden}
figure{margin:1em 40px}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
pre{overflow:auto}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
a,button,input,optgroup,select,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);}
button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;-webkit-appearance:none;outline:none;line-height:normal}
button{overflow:visible}
button,select{text-transform:none}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
input{line-height:normal}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-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}
fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0}
textarea{overflow:auto}
optgroup{font-weight:bold}
table{border-collapse:collapse;border-spacing:0}
td,th{padding:0}

  .clear-fix::after {
    clear: both;
    content: '';
    display: block;
    width: 0;
    height: 0;
    visibility: hidden;
  }
  
  .clear-fix {
    zoom: 1;
  }
  
  .left {
    float: left;
  }
  
  .right {
    float: right;
  }

单位：rem。相对于根元素<html>

如何使1rem=10px
在设置HTML{font-size：62.5%；}即可。

 在上述代码中，font-size：62.5%；表示将根元素html的字体大小设置为浏览器默认字体大小的62.5%，即16px * 0.625 = 10px。这个设置是为了方便将px单位转换成rem单位，因为1rem相当于根元素字体大小的倍数。

例如，如果要将某个元素的字体大小设置为20px，则可以将其设置为2rem，因为20px是根元素字体大小的两倍（即 20 / 10 = 2）。这样，我们就可以使用相对单位rem来实现响应式设计，而不必考虑浏览器默认字体大小的影响。

div{font-size:100rem;} // 100*10 = 1000px

A & Q

• 为什么不设置 font-size:62.5% ？

  因为谷歌有些版本不支持10px大小的字体

• 为什么不使用 em (相对于父元素)？

  同百分比一样，相对于父元素计算不方便

• 为什么不使用 viewport 等比缩放？

  viewport的做法：

  <meta name=" viewport " content=" width=320, maximum-scale=1.3, user-scalable=no ">

  这种做法是将屏幕等比缩放，缩放过大时会失真

• 使用rem web就是响应式的了吗？

  不是，rem只是等比缩放，只解决了响应式布局的准则 的部分问题 ，还需要配合媒体查询

移动端1px边框问题

@charset "utf-8";
.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.border-topbottom,
.border-rightleft,
.border-topleft,
.border-rightbottom,
.border-topright,
.border-bottomleft {
  position: relative;
}
.border::before,
.border-top::before,
.border-right::before,
.border-bottom::before,
.border-left::before,
.border-topbottom::before,
.border-topbottom::after,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::before,
.border-topleft::after,
.border-rightbottom::before,
.border-rightbottom::after,
.border-topright::before,
.border-topright::after,
.border-bottomleft::before,
.border-bottomleft::after {
  content: "\0020";
  overflow: hidden;
  position: absolute;
}
/* border
 * 因，边框是由伪元素区域遮盖在父级
 * 故，子级若有交互，需要对子级设置
 * 定位 及 z轴
 */
.border::before {
  box-sizing: border-box;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 1px solid #eaeaea;
  transform-origin: 0 0;
}
.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before {
  left: 0;
  width: 100%;
  height: 1px;
}
.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after {
  top: 0;
  width: 1px;
  height: 100%;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
  border-top: 1px solid #eaeaea;
  transform-origin: 0 0;
}
.border-right::before,
.border-rightbottom::before,
.border-rightleft::before,
.border-topright::after {
  border-right: 1px solid #eaeaea;
  transform-origin: 100% 0;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::before {
  border-bottom: 1px solid #eaeaea;
  transform-origin: 0 100%;
}
.border-left::before,
.border-topleft::after,
.border-rightleft::after,
.border-bottomleft::after {
  border-left: 1px solid #eaeaea;
  transform-origin: 0 0;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
  top: 0;
}
.border-right::before,
.border-rightleft::after,
.border-rightbottom::before,
.border-topright::after {
  right: 0;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::after {
  bottom: 0;
}
.border-left::before,
.border-rightleft::before,
.border-topleft::after,
.border-bottomleft::before {
  left: 0;
}
@media (max--moz-device-pixel-ratio: 1.49),
  (-webkit-max-device-pixel-ratio: 1.49),
  (max-device-pixel-ratio: 1.49),
  (max-resolution: 143dpi),
  (max-resolution: 1.49dppx) {
  /* 默认值，无需重置 */
}
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49),
  (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),
  (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),
  (min-resolution: 144dpi) and (max-resolution: 239dpi),
  (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
  .border::before {
    width: 200%;
    height: 200%;
    transform: scale(0.5);
  }
  .border-top::before,
  .border-bottom::before,
  .border-topbottom::before,
  .border-topbottom::after,
  .border-topleft::before,
  .border-rightbottom::after,
  .border-topright::before,
  .border-bottomleft::before {
    transform: scaleY(0.5);
  }
  .border-right::before,
  .border-left::before,
  .border-rightleft::before,
  .border-rightleft::after,
  .border-topleft::after,
  .border-rightbottom::before,
  .border-topright::after,
  .border-bottomleft::after {
    transform: scaleX(0.5);
  }
}
@media (min--moz-device-pixel-ratio: 2.5),
  (-webkit-min-device-pixel-ratio: 2.5),
  (min-device-pixel-ratio: 2.5),
  (min-resolution: 240dpi),
  (min-resolution: 2.5dppx) {
  .border::before {
    width: 300%;
    height: 300%;
    transform: scale(0.33333);
  }
  .border-top::before,
  .border-bottom::before,
  .border-topbottom::before,
  .border-topbottom::after,
  .border-topleft::before,
  .border-rightbottom::after,
  .border-topright::before,
  .border-bottomleft::before {
    transform: scaleY(0.33333);
  }
  .border-right::before,
  .border-left::before,
  .border-rightleft::before,
  .border-rightleft::after,
  .border-topleft::after,
  .border-rightbottom::before,
  .border-topright::after,
  .border-bottomleft::after {
    transform: scaleX(0.33333);
  }
}

如有不足请多多指教！希望给您带来帮助！

参考文献：https://blog.csdn.net/jiang_my/article/details/75125781