This time I will show you how to create a 1px border effect on the mobile terminal. What are the precautions ? The following is a practical case. Let’s take a look. .
Background
Use stylus under vue.js to implement a 1-pixel border. If you use css style attributes
border-bottom
To implement the border, it is a 1 pixel border (1 thin line) on the PC browser, but on the mobile device, the larger the DPI value, the clearer the screen. Using this property, it will become a very thick line on mobile devices.
Implementation method
Method 1: Pseudo classPositioning + scaling
1. First define a pseudo class on the element where the border is to be drawn. This It is an absolute positioning. A 1-pixel border is drawn through the pseudo class and positioned under the element, which is the bottom border
border-1px($color) position: relative
&:after
display: block position: absolute left: 0
bottom: 0
width: 100%
border-top: 1px solid $color content: ' '2. Implement a class to scale the pseudo class. Scale the vertical axis proportionally based on the device's minimum DPI.
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
.border-1px
&::after
-webkit-transform: scaleY(0.7) transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
.border-1px
&::after
-webkit-transform: scaleY(0.5) transform: scaleY(0.5)Method 2: Directly use
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Related reading:
set data structure and map data structure of ES6
Detailed explanation of new judgments about numbers in ES6
Introduction and export of commonJS and es6 specifications
The above is the detailed content of How to create a 1px border effect on the mobile terminal. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
