前端必会的 HTML+CSS 常用技巧 之 移动端 1px 边框

Posted zhuangwei_8256

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端必会的 HTML+CSS 常用技巧 之 移动端 1px 边框相关的知识,希望对你有一定的参考价值。

目录

写在开头

正文之前,我们需得了解几个重要的名词: 物理像素、设备独立像素和设备像素比
工作中我们通常使用 px 作为定义元素宽高、边框粗细、内外边距等的单位,但是需要注意的是:

CSS样式里面的 px 和 物理像素 并不是相等的。
CSS中的像素只是一个抽象的单位,在不同的设备中,1px所代表的物理像素是不同的。
在PC端,CSS的1px一般对应着电脑屏幕的1个物理像素,
但在移动端,CSS的1px由于设备机型的不同,所呈现出来的可能不是一个像素,可能是几个物理像素。

物理像素(physical pixel)

物理像素又被称为设备像素、设备物理像素,它是显示器(电脑、手机屏幕)最小的物理显示单位,每个物理像素由颜色值和亮度值组成。所谓的一倍屏、二倍屏(Retina)、三倍屏,指的是设备以多少物理像素来显示一个CSS像素,也就是说,多倍屏以更多更精细的物理像素点来显示一个CSS像素点,在普通屏幕下1个CSS像素对应1个物理像素,而在Retina屏幕下,1个CSS像素对应的却是4个物理像素

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

设备独立像素又被称为CSS像素,也就是是我们写CSS时所用的像素(px),它是一个抽象的单位,主要使用在浏览器上,用来精确度量Web页面上的内容。

设备像素比(device pixel ratio)

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

CSS的1px等于几个物理像素,除了和屏幕像素密度dpr有关,还和用户缩放有关系。例如,当用户把页面放大一倍,那么CSS中1px所代表的物理像素也会增加一倍;反之把页面缩小一倍,CSS中1px所代表的物理像素也会减少一倍。


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

方案一

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

方案二

.border-1-bottom
	position: relative;

.border-1-bottom:aftercontent: "";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%,能解决有时候边框缺失的问题 */
	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 边框 ------ 结束 */

写在末尾


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

以上是关于前端必会的 HTML+CSS 常用技巧 之 移动端 1px 边框的主要内容,如果未能解决你的问题,请参考以下文章

前端必会的 HTML+CSS 常用技巧 之 移动端 1px 边框

前端必会的 HTML+CSS 常用技巧 之 虚线的实现方式

前端必会的 HTML+CSS 常用技巧 之 虚线的实现方式

前端必会的 HTML+CSS 常用技巧 之 虚线的特殊实现方式

前端开发必会的HTML/CSS硬知识

大前端公开课——必玩必会的CLI脚手架(Vue面试问答技巧)