1px像素问题（二）：解决方法

最新推荐文章于 2024-07-05 17:35:21 发布

醉逍遥neo

最新推荐文章于 2024-07-05 17:35:21 发布

阅读量1.7k

点赞数 6

分类专栏： html/css/js 文章标签： viewport 1px像素问题 meta 移动端兼容

本文链接：https://blog.csdn.net/u010059669/article/details/88957510

版权

html/css/js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

前言

上一篇博文分析了1px像素问题的产生原因，
这次就分享一下解决方法。

解决方法有很多，根据项目环境和使用场景选择最合适的就行，下面整理了一下解决方式：

1、通过设置meta标签viewport

分析1px像素产生原因时，有说到meta标签设置的width=device-width，其实这也是产生1px像素问题的前提条件之一，无论你是rem适配方式还是媒体查询的响应式布局，你最终在375px的总宽度下，边框最小css单位也只能是1px，而750px的设计图里1px占1/750，375px里1px占1/375，比例大了一倍，视觉上肯定是粗了。

所以，如果设置content的width就等于设计图大小750px，然后通过动态设置maximum-scale值让网页整体缩放，就能实现效果了，这也是适配移动端不同屏幕大小的一种思路。

以iphoneX为例，

<meta name="viewport" content="width=750,initial-scale=0.5,user-scalable=no">

这样就能让iphoneX完美还原750px的设计图了，initial-scale的值动态设置为window.screen.width / 750，iphoneX下就是0.5。

不过这样设置后，在和其他content属性width值不同的页面间来回切换会出现横向滚动条，不推荐使用（这里介绍这种方法也是帮助更好的理解1px像素问题）。

2、通过transform: scale()缩放（推荐）

（1) 单边

以下边框为例：

.div::after {
	content: '';
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    border-bottom: 1px solid #bfbfbf;
    transform: scaleY(1/2);
    transform-origin: left bottom;
}

如果还需要添加其他边框，可以用before伪元素再加，例如再加个右边框：

.div::before {
	content: '';
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    width: 2px;
    height: 100%;
    border-right: 1px solid #bfbfbf;
    transform: scaleX(1/2);
    transform-origin: right bottom;
}

（2) 所有边

此种方式可以添加边框圆角：

 .div::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 300%;
    height: 300%;
    border: 1.5px solid #bfbfbf;
    transform: scale(1/1.5/2);
    transform-origin: left top;
    border-radius: 6px;
}

备注：

注意需要先给目标div元素添加非static的position属性，因为以上方法都是利用伪元素定位实现的。
具体的scale缩放比例取决于你是几倍设计图尺寸下的1px，例如二倍图(750px)尺寸下，缩放比例就是1/2（敲黑板：scale缩放比例和dpr无关）。
网上的常规代码会有个别安卓机型边框不显示的问题，我自己的代码已经做了各种兼容处理：单边方案就给伪元素1px的内容区域高度或宽度，加上边框就是2px；所有边的话就基于1.5px边框宽度来进行缩放。