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 aboutDevice 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, so1 pixel lineIt takes up space on the screenTwo or moreVisual 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

  • usetansform: 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

  • usinglinear-gradientUse 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