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 codeTransform :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 codeScaling 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 codeThe 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 code2 The text exceeds the ellipsis
A single
.box{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Copy the codeMultiple lines
.box {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
Copy the code3 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 code4 after before
.box:after,.box:before{
content: "";
display: table;
}
.box:after{
clear: both;
}
.box{
*zoom: 1;
}
Copy the code