reset.css與border.css
阿新 • • 發佈:2020-08-29
1.瀏覽器樣式重置-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; }
2.移動端1px解決-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); } }