可以使用 calc 画 1px 的线吗？

最新推荐文章于 2022-05-19 14:28:33 发布

zxf_CN

最新推荐文章于 2022-05-19 14:28:33 发布

阅读量131

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/zxf_CN/article/details/110927163

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

网上的 1px 都是使用缩放，也就是 transform: scale(xx); 来得到 1xp 的线，是将 1px 的线进行缩放

.a {
	width: 100px;
	height: 1px;
	background-color: #333;
}

<div class="a"></div>

这条线，在浏览器上不同的手机型号浏览，都会得到不同的高度（就是大小），所以 1px 高的线，可能会变成 2px，3px 等等，都有能。

于是人们就想到了用缩放对吧

.a {
	width: 100px;
	height: 1px;
	background-color: #333;
	transform: scale(0.5);
}

效果为：
在这里插入图片描述
很明显变小了。

之所以进行 0.5 倍的缩放，是因为在苹果5/SE 上浏览才 0.5 的，在不同的屏幕浏览，是不一样的；

可以使用 window.devicePixelRation 得到当前屏幕的这个值，不知道怎么叫他；1/window.devicePixelRation ， 1 / 2 = 0.5 就可以得到要缩小的值了。

一般是这样的：
我们在模拟手机屏幕看到的这个
在这里插入图片描述
就是屏幕的逻辑像素。

物理像素 = 逻辑像素 * window.devicePixelRation，

( 物理像素是我们看到的样子 )

也就是说我们的 1px 线（我们写的样式 1px 也是逻辑像素），当显示在页面上时 1px 就会变成（当前页面的 window.devicePixelRation 为 2） 1px * 2 = 2px ，我们在页面上看到的 1px 就会变成 2px，

然后我在想可不可以使用 css 的计算方法 calc 来计算呢？

于是进行了下面的实验：
首先，先说一下是在苹果5/SE 下进行浏览的，参数为

逻辑像素
	screen.width = 320
	screen.height = 568
像素比（应该可以这么说吧）
	window.devicePixelRation = 2

苹果手机浏览
页面就是这样，2个 div，都为 100px，因为 1px 有点难看出来，结构和样式为：

<style>
 .one,
 .two {
	width: 100px;
	height: 100px;
	margin: 100px 100px;
	background-color: #333;
 }
 </style>

<body>
	<div class="one"></div>
	<div class="two"></div>
</body>

1，我们使用网上的方法，将 one 进行缩小，就相当于 1px 的线进行缩放，得到
在这里插入图片描述
那我们使用 calc 来设置 two 的宽高度：

他们是一样的，把鼠标移上什么时，都显示 50 x 50 的大小；
这个是否可以证明也可以使用 calc 来画一个 1px 的线呢；请指教。

zxf_CN

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
可以使用 calc 画 1px 的线吗？

网上的 1px 都是使用缩放，也就是 transform: scale(xx); 来得到 1xp 的线，是将 1px 的线进行缩放.a { width: 100px; height: 1px; background-color: #333;}<div class="a"></div>这条线，在浏览器上不同的手机型号浏览，都会得到不同的高度（就是大小），所以 1px 高的线，可能会变成 2px，3px 等等，都有能。于是人们就想到了用缩放对吧.a {
复制链接

扫一扫

专栏目录