Vue Unified Styles (reset.css and border-.css)

reset.css

The basic styles need to be set up in the project, so that the display effect is the same in different browsers. This CSS style is used for this purpose.

@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 {text-align: left; 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", "Microsoft Yahei ", Simsun, sans-serif} h1, H2, h3, h4, h5, h6, b, 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; }Copy the code

border.css

This CSS style is used to solve the 1-pixel border problem on mobile. Cause: Some phones have very high screen resolution (2x or 3x), border-bottom: 1px solid red in CSS style; On a 2x screen, instead of showing 1 physical pixel, it shows 2 physical pixels; Same thing with triple screen.

@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::before {box-sizing: border-box; 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-device-pixel-ratio: 1.49) 1.49), (max-resolution: 143dpi), (max-resolution: 1.49 DPPX) {/* Default value, no reset */} @media (min--moz-device-pixel-ratio: And (Max --moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49) 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 144dpi). 2.49 DPPX) {.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-device-pixel-ratio: 2.5) 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); }}Copy the code

Methods used in projects

Just import it in the entry file main.js in the vue project

/ / in the introduction of basic style import entry file '. / assets/styles/reset. CSS 'import'. / assets/styles/border. CSS 'Copy the code