当前位置:网站首页>The problem of 1 pixel border on the mobile terminal
The problem of 1 pixel border on the mobile terminal
2022-04-23 20:27:00 【Yunmo - brother Kuang's blog】
Mobile 1 Pixel border problem
----- If the screen resolution of our mobile phone is relatively high , It's a double screen or triple screen , If we write on the page border-bottom: 1px; What we write at this time is 1px, But it's actually css Pixels , Not physical pixels , If we watch carefully , On a double or triple screen, it's not actually 1 Individual physical pixels , It's the height of two physical pixels or three pixels , In order to solve the problem of multiple screen 1 The problem that pixel borders will be displayed as multi-pixel borders , Need to introduce a solution , This scheme is a css file
Here's this css Source code of the document
@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 * because , The border is covered by a pseudo element area at the parent level * so , If there is interaction between children , You need to set up * location And z Axis */
.border::before {
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-resolution: 143dpi), (max-resolution: 1.49dppx) {
/* The default value is , No need to reset */
}
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
.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-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);
}
}
notes :
I have also shared some small problems and solutions encountered in the development of mobile terminals before , If you are interested, you can go and have a look , Link address attached
Click here , More surprises ! Thank you guys
版权声明
本文为[Yunmo - brother Kuang's blog]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/04/202204210551061497.html
边栏推荐
- ArcGIS JS version military landmark drawing (dovetail arrow, pincer arrow, assembly area) fan and other custom graphics
- 6-5 字符串 - 2. 字符串复制(赋值) (10 分)C语言标准函数库中包括 strcpy 函数,用于字符串复制(赋值)。作为练习,我们自己编写一个功能与之相同的函数。
- 【问题解决】‘ascii‘ codec can‘t encode characters in position xx-xx: ordinal not in range(128)
- LeetCode 232、用栈实现队列
- 【栈和队列专题】—— 滑动窗口
- LeetCode 709、转换成小写字母
- Customize timeline component styles
- How can matlab obtain the truncated image in trainingimagelabeler
- Some basic configurations in interlij idea
- Numpy mathematical function & logical function
猜你喜欢
Vscode download speed up
ArcGIS JS version military landmark drawing (dovetail arrow, pincer arrow, assembly area) fan and other custom graphics
【PTA】整除光棍
Install MySQL 5.0 under Linux 64bit 6 - the root password cannot be modified
Identification of bolt points in aerial photography based on perception
JDBC tool class jdbcfiledateutil uploads files and date format conversion, including the latest, simplest and easiest way to upload single files and multiple files
16MySQL之DCL 中 COMMIT和ROllBACK
[graph theory brush question-4] force deduction 778 Swimming in a rising pool
[graph theory brush question-5] Li Kou 1971 Find out if there is a path in the graph
【PTA】L1-002 打印沙漏
随机推荐
[PTA] get rid of singles
16MySQL之DCL 中 COMMIT和ROllBACK
Livego + ffmpeg + RTMP + flvjs to realize live video
SQL Server connectors by thread pool 𞓜 instructions for dtsqlservertp plug-in
[problem solving] 'ASCII' codec can't encode characters in position XX XX: ordinal not in range (128)
Es index (document name) fuzzy query method (database name fuzzy query method)
Change the material of unity model as a whole
bounding box iou
On BIM data redundancy theory
內網滲透之DOS命令
Handwritten Google's first generation distributed computing framework MapReduce
[graph theory brush question-4] force deduction 778 Swimming in a rising pool
LeetCode 116. 填充每个节点的下一个右侧节点指针
Numpy mathematical function & logical function
R language uses timeroc package to calculate the multi time AUC value of survival data under competitive risk, uses Cox model and adds covariates, and R language uses the plotauccurve function of time
LeetCode 709、转换成小写字母
star
The R language uses the timeroc package to calculate the multi time AUC value of survival data without competitive risk, and uses the confint function to calculate the confidence interval value of mul
How can matlab obtain the truncated image in trainingimagelabeler
Rt-1052 learning notes - GPIO architecture analysis