Home > Article > Web Front-end > Introduction to the method of drawing 0.5 pixels on the front-end page
Introduction to the method of drawing 0.5 pixels on the front-end page
- 巴扎黑Original
- 2017-08-12 15:04:581733browse
This article mainly introduces several methods for drawing 0.5 pixels on the Web front-end, which are implemented by using meta viewport, border-image, background-image and transform: scale(). Friends who need it can refer to it
Recently completed the mobile web touch screen development arranged by the company, which involved displaying lines on mobile devices. At first, the css board attribute commonly used on PCs was used to display 1-pixel lines, but it was found that it did not work on mobile devices. It’s not beautiful. Referring to the touch screens of Taobao and JD.com, we found that they all use shallow and thin lines to display on mobile devices.
The following records four more convenient ways to draw 0.5 pixel lines
1. Use the meta viewport method, which is also the method used by Taobao touch screen
Commonly used mobile html viewport settings are as follows
0028de0eb0f2df70276d6fe77b7b4880
I won’t mention the specific meaning. It is to make the height and width of the page equal to the height and width of the device in pixels. In order to facilitate the drawing of a 0.5 pixel viewport, the settings are as follows
31fb3175acbfcc4df439bfc8506905d7
The width and height of html are 2 times the size of the device. If the css board is still used at this time to be 1 pixel, the page lines seen by the naked eye are equivalent to the effect of transform:scale(0.5), which is 0.5 pixels
But this method involves the page The overall layout planning and image size production, so if you use this method, it is better to determine it in advance
2. Use the border-image method
This is actually relatively simple Now, just create a picture of a 0.5 pixel line and its matching background color
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>boardTest</title>
<style>
p{
margin: 50px auto;
padding: 5px 10px 5px 10px;
color: red;
text-align: center;
width: 60px;
}
p:first-child{
border-bottom: 1px solid red;
}
p:last-child{
border-width: 0 0 1px 0; border-image: url("img/line_h.gif") 2 0 round;
}
</style>
<body>
<p>
<p>点击1</p>
<p>点击2</p>
</p>
</html>3. Use the background-image method
What I use here is the linear-gradient method of gradient color. The code is as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>boardTest</title>
<style>
p{
margin: 50px auto;
padding: 5px 10px 5px 10px;
color: red;
text-align: center;
width: 60px;
}
p:first-child{
border-bottom: 1px solid red;
}
p:last-child{
background-image: -webkit-linear-gradient(bottom,red 50%,transparent 50%);
background-image: linear-gradient(bottom,red 50%,transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom right;
</style>
</head>
<body>
<p>
<p>点击1</p>
<p>点击2</p>
</p>
</body>
</html>linear-gradient(bottom,red 50%, transparent 50%); means to draw a gradient color from the bottom, the color is red, the proportion is 50%, and the total width has been set to 100% and the total height is one pixel background-size: 100% 1px;
This will display a line of 0.5 pixels
4. Use the transform: scale() method
It is the height of the drawn line To perform half-time scaling, the code is as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>boardTest</title>
<style>
p{
margin: 50px auto;
padding: 5px 10px 5px 10px;
color: red;
text-align: center;
width: 60px;
}
p:first-child{
border-bottom: 1px solid red;
}
p:last-child{
position: relative;
}
p:last-child:after {
position: absolute;
content: '';
width: 100%;
left: 0;
bottom: 0;
height: 1px;
background-color: red;
-webkit-transform: scale(1,0.5);
transform: scale(1,0.5);
-webkit-transform-origin: center bottom;
transform-origin: center bottom
}
</style>
</head>
<body>
<p>
<p>点击1</p>
<p>点击2</p>
</p>
</body>
</html>The above is the detailed content of Introduction to the method of drawing 0.5 pixels on the front-end page. For more information, please follow other related articles on the PHP Chinese website!