解決移動端1px（1畫素）問題

border.css
該css樣式用於解決移動端1畫素邊框問題。問題解析：有些手機的螢幕解析度較高，是2-3倍螢幕。css樣式中border:1px solid red;在2倍屏下，顯示的並不是1個物理畫素，而是2個物理畫素。為了解決找個問題，引入border.css是非常有必要的。

@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(.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(.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(.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(.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(.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(.33333);
  }
  }

reset.css

不同瀏覽器對相同標籤的顯示效果，有時候往往不同，那麼在做專案的時候就需要對基本的樣式進行設定，以達到在不同瀏覽器下顯示效果是相同的，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;
}