This is the third day of my participation in the August More text Challenge. For details, see:August is more challenging
How to draw a one pixel line with CSS, this problem is a lot of developers in the development process of common problems, but also front-end students in the interview when one of the common problems.
Read this article to find out
- Why would a one-pixel line be visually thicker than a one-pixel line
- How to draw a line exactly one pixel
Define several concepts
Physical Pixels (device pixels)
- The smallest physical unit of a display screen.
- Each physical pixel contains its own color, height, width, etc., and cannot be subdivided.
- The physical pixels are set at the factory and do not change in size or number once the device is built. The official 1920×1080 in the product specification means physical pixels.
Device independent pixel
- Device-independent pixels (also called density-independent pixels) can be thought of as a point in a computer coordinate system that represents a virtual pixel (such as a CSS pixel) that can be used by a program, sometimes referred to as a logical pixel, which is converted into a physical pixel by the associated system.
- So, there’s a correspondence between the physical pixels and the device independent pixels, and that’s what we’re going to talk about
Device pixel ratio
.
Device pixel ratio
- The device pixel ratio (DPR for short) defines the relationship between the physical pixels and the device’s individual pixels.
- Its value can be obtained by the following formula:
// Device pixel ratio (DPR) = physical pixel/logical pixel (px)Copy the code
Cause of visual error
- Because of the conversion between the screen resolution and the browser resolution, so
1 pixel line
It takes up space on the screenTwo or more
Visual pixels, especially on mobile. - Because it takes up a lot of visual pixels, the rendered line is visually thicker than one pixel.
Implementation method
Use pseudo-class solutions
- use
tansform: scale(.5);
Reduce the height by half - Advantages: All scenarios can be met
- Disadvantages: Elements that already use pseudo-classes require multiple levels of nesting
There are no :before, :after pseudo-elements
.box-one-px {
position: relative;
}
.box-one-px:before {
display: block;
content: '';
position: absolute;
left: 0;
top: 0;
width: 200%;
height: 1px;
tansform: scale(.5);
tansform-origin: 0 0;
background: #f5f5f5;
}
Copy the code
Use meta Viewport
- Viewport and REM solve the pixel ratio problem, and automatically scale the thickness of fine lines according to the proportion.
// Set meta <meta name="viewport" content="initial-scale=0.5, maximal-scale =0.5, Minimum - scale = 0.5, User - scalable = no "> / / is set in the screen of the devicePixelRatio = 3 meta < meta name =" viewport "content =" initial - scale = 0.3333333333333333, Maximum - scale = 0.3333333333333333, the minimum - scale = 0.3333333333333333, user - scalable = no ">Copy the code
Use box-shadow to simulate the border
- Disadvantages: the effect is not ideal, the color is not good configuration
.box-one-px {
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}
Copy the code
Use the border – image
- You need to make a 0.5 pixel line as the background image
- Pros: Images can be used in multiple formats
- Disadvantages: Inflexible size and color changes, adding unnecessary requests
.box-one-px {
border-width: 0 0 1px 0;
border-image: imageUrl 2 0 round;
}
Copy the code
Use the background gradient linear
- using
linear-gradient
Use the background image to gradient from color to transparent. The default direction is top to bottom. The color from 0 to 50% is the border color, and the bottom half is transparent. Then set the background width to 100%, the height to 1px, and remove the repeat, so that the colored lines are 0.5px - Disadvantages: Large amount of code, and need to target different border structure; Cannot accommodate rounded corners
.box-one-px {
background-image: linear-gradient(0deg,black 50%,transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
}
Copy the code
Use a third-party library
- Now on the network commonly used to solve the device pixel ratio of third-party libraries
- amfe-flexible
- ant-design-mobile
- Vant component library
Write in the last
If you find this article helpful, please like it and share it with more people who need it!
Welcome to pay attention to [Quanzhendaolu] and wechat public account [Quanzhendaolu], to get more good articles and free books!
There is a need [Baidu] & [bytedance] & [JD] & [ape counselling] within the push, please leave a message oh, you will enjoy the VIP level extreme speed within the push service ~
Past oliver
Create a personalized Github profile
The interviewer asks you<img>
What elements do you say
Special JS floating point number storage and calculation
Long [word] baidu and good interview after containing the answer | the nuggets technology essay in the future
Front end practical regular expression & tips, all throw you 🏆 nuggets all technical essay | double festival special articles
HTML Tabindex
A few lines of code to teach you to solve wechat poster and TWO-DIMENSIONAL code generation
Vue3.0 Responsive data principle: ES6 Proxy
Read on to make your interviewer fall in love with you
Remember a painful experience
Front-end performance optimization -HTML, CSS, JS parts
Front-end performance optimization – Page loading speed optimization
Front-end performance optimization – Network transport layer optimization