current position:Home>Front end will be commonly used HTML + CSS skills of mobile terminal 1 px borders

Front end will be commonly used HTML + CSS skills of mobile terminal 1 px borders

2022-08-06 16:06:46zhuangwei_8256

写在开头

正文之前,We need to know several important nouns: 物理像素、Device independent pixel and pixel than
We usually use at work px As define the elements wide high、边框粗细、Inside and outside the unit margin, etc,但是需要注意的是:

CSS样式里面的 px 和 物理像素 并不是相等的.
CSS中的像素只是一个抽象的单位,在不同的设备中,1pxRepresented by the physical pixel is different.
在PC端,CSS的1pxGenerally corresponds to the computer screen1个物理像素,
但在移动端,CSS的1pxDue to the different equipment models,May not be presented by a pixel,May be several physical pixel.

物理像素(physical pixel)

物理像素又被称为设备像素、设备物理像素,它是显示器(电脑、手机屏幕)The minimum physical display unit,Each physical pixel consists of color and brightness values.The so-called double screen、二倍屏(Retina)、三倍屏,Refers to how many physical pixels to display device to aCSS像素,也就是说,Many times the screen with more finer physical pixels to display aCSS像素点,在普通屏幕下1个CSS像素对应1个物理像素,而在Retina屏幕下,1个CSS像素对应的却是4个物理像素

设备独立像素(device-independent pixel)

Device independent pixel is also known asCSS像素,Also is we writeCSSUsed for the pixels(px),It is an abstract unit,主要使用在浏览器上,用来精确度量Web页面上的内容.

设备像素比(device pixel ratio)

设备像素比简称为dpr,定义了物理像素和设备独立像素的对应关系:设备像素比 = 物理像素 / 设备独立像素.

CSS的1px等于几个物理像素,In addition to, and screen pixel densitydpr有关,Also with the user zoom.例如,当用户把页面放大一倍,那么CSS中1px所代表的物理像素也会增加一倍;反之把页面缩小一倍,CSS中1px所代表的物理像素也会减少一倍.


移动端 1px 边框的解决方案

方案一

.border-1-bottom {
    
  box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}

方案二

.border-1-bottom{
    
	position: relative;
}
.border-1-bottom:after{
    content: "";width: 100%;height: 1px;background: #ccc;position: absolute;left: 0;
	bottom: 0;transform: scaleY(0.5);transform-origin: center bottom;
}
/* 或者 */
.border-1-bottom:before {
    
	content: " ";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	border-bottom: 1px solid #ccc;
	color: #ccc;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
}


方案三

/* 移动端 1px 边框 ------ 开始 */
.border-1, .border-1-bottom, .border-1-left, .border-1-right, .border-1-top, .border-1-top-bottom {
    
	position: relative;
}

.border-1-bottom:after, .border-1-left:after, .border-1-right:after, .border-1-top-bottom:after, .border-1-top:after, .border-1:after {
    
	content: ' ';
	pointer-events: none;
	box-sizing: border-box;
	-webkit-transform-origin: 0 0;
	position: absolute;
	left: 0;
	top: 0;
	transform-origin: 0 0;
	/* 多加 0.1%,To solve the problem of sometimes border is missing */
	width: 199.8%;
	height: 199.7%;
	transform: scale(0.5, 0.5);
	border: 0px solid #eee;
	z-index: 2;
}

.border-1-top:after {
    
	border-top-width: 1px;
}

.border-1-left:after {
    
	border-left-width: 1px;
}

.border-1-right:after {
    
	border-right-width: 1px;
}

.border-1-bottom:after {
    
	border-bottom-width: 1px;
}

.border-1-top-bottom:after {
    
	border-width: 1px 0;
}

.border-1:after {
    
	border-width: 1px;
}

/* 移动端 1px 边框 ------ 结束 */

写在末尾


如有不足,望大家多多指点! 谢谢!

copyright notice
author[zhuangwei_8256],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/218/202208061554421912.html

Random recommended