实现1px物理像素边框-css

最新推荐文章于 2024-08-22 11:27:46 发布

纯黑色山羊

最新推荐文章于 2024-08-22 11:27:46 发布

阅读量572

点赞数 1

分类专栏：功能业务文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_39876270/article/details/123291501

版权

功能业务专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文探讨了如何在不同设备上确保CSS的1px边框与物理像素保持一致，通过调整`initial-scale`和媒体查询技巧，实现响应式设计中的精确布局。实例展示了通过缩放和媒体查询针对不同像素比调整元素尺寸的方法。

摘要由CSDN通过智能技术生成

背景

一般设置边框为1px，实际上指的是css上的css，在设备上会受到像素比的影响，从而导致css的1px并不等于设备上的css；

名称解释

像素比：指的是物理像素分辨率与CSS像素分辨率之比，在web上使用window.devicePixelRatio获取其值

示例

第一种，通过改变mate标签中的initial-scale缩放值与设置html的fontSize实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <title>Document</title>
    <stlye>
    	html{
    		font-size:5xp;
    	}
		.box{
			width:10rem;
			height:10rem;
			border:1px solid orange;
		}
	</style>
  </head>
  <body>
  	<div class = 'box'></div>
  </body>
</html>

window.onload = ()=>{
	// 获取像素比,像素比 = 物理像素/CSS像素
	const dpr = window.devicePixelaRtio;
	// 获取缩放比例
	const scale = 1 / dpr;
	// 获取meta标签
	const metaDom = document.querySelect('meta[name="viewport"]');
	// 设置meta标签的缩放值
	metaDom.setArrtribute('content',`width=device-width, initial-scale=${scale}, user-scalable=no`)
	// 此时css的1px已经等于屏幕上物理像素的1px
	// 由于整体都被缩放了，所以需要把其他元素的大小进行反向计算
	// 此例子中使用rem作为元素宽高的单位
	// 所以需要html的fontSize乘以像素比
	const htmlDom = document.querySelect('html');
	htmlDom.style.fontSize = parseFloot(htmlDom.style.fontSize * dpr) + "px"
}

第二种，通过媒体查询的方式，改变边框的px值实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <stlye>
		.box{
			position:relative;
			widht:200px;
			height:200px;
		}
		.box::before{
			content:'';
			position:absolute;
			left:0;
			bottom:0;
			height:1px;
			background:orange;
		}
		@media screen and (-webkit-min-device-pixel-ratio:2){
			.box::before{
				tansform:scaleY(0.5);
			}
		}
		@media screen and (-webkit-min-device-pixel-ratio:3){
			.box::before{
				tansform:scaleY(.33333);
			}
		}
	</stlye>
  </head>
  <body>
  	<div class = "box"></div>
  </body>
</html>