1 Mobile 1 pixel border

Reason: Retina display manufacturers compress multiple pixels into a single logical pixel to achieve hd effect.

Physical pixel When mobile devices are delivered, different devices have different pixels, also known as hardware pixels.

Logical pixels are the pixels recorded in the CSS.

When we use 1px we get 2px and 3px width.

Solution 1 Media query

.border { border: 1px solid #999 } @media screen and (-webkit-min-device-pixel-ratio: 2) { .border { border: 0.5px solid #999}} @media screen and (-webkit-min-device-pixel-ratio: 3) {. Border {border: 0.333333px solid #999}} Disadvantages: Device requirements, the current compatibility of decimal pixels is poor.Copy the code

Transform :scale(0,5)

.div::after { content: ''; width: 200%; height: 200%; position: absolute; top: 0; left: 0; border: 1px solid #bfbfbf; border-radius: 4px; - its - transform: scale (0.5, 0.5); The transform: scale (0.5, 0.5); -webkit-transform-origin: top left; }Copy the code

Scaling can be set through media queries

/* @media only screen and (-webkit-min-device-pixel-ratio: 2.0) {. Border -bottom::after {-webkit-transform: ScaleY (0.5); The transform: scaleY (0.5); }} /* @media only screen and (-webkit-min-device-pixel-ratio: 3.0) {. Border -bottom::after {-webkit-transform: ScaleY (0.33); The transform: scaleY (0.33); }}Copy the code

The introduction of 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::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

2 The text exceeds the ellipsis

A single

.box{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
Copy the code

Multiple lines

.box {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
Copy the code

3 Clearing floats

1 Extra label method

Add element attributes to clear:both after the last floating tag

2 overflow: hidden

Parent add Overflow: Hidden (not recommended)

3 after

Add: after pseudo-element setting attribute to the element

box:after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
Copy the code

4 after before

.box:after,.box:before{
    content: "";
    display: table;
}
.box:after{
    clear: both;
}
.box{
    *zoom: 1;
}
Copy the code