移动端像素border的实现

最新推荐文章于 2024-06-21 17:28:33 发布

原创最新推荐文章于 2024-06-21 17:28:33 发布 · 306 阅读

0 ·

CC 4.0 BY-SA版权

本文探讨了在不同设备物理像素比下统一设置1px边框的问题，并提供了使用CSS媒体查询和伪元素来调整边框宽度的解决方案。

在移动端中，不同的显示器物理设备像素比不一样，可能导致的结果就是当统一设置border:1px solid #ccc；的时候，物理设备像素比为2的手机就会显示为2px的border 。

我们先撇开怎么解决这种问题不说，先了解一下什么是设备物理像素比，它的定义是这样的

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

公式表示就是：window.devicePixelRatio = 物理像素 / dips

更多详情请查看张鑫旭老师的一篇文章《设备像素比devicePixelRatio简单介绍》链接http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

上板栗:

结构很简单

<div class="main"></div>

然后我们定义样式

.main{
			width:200px;
			height:30px;
			background:#ccc;
			position:relative;
		}

然后我们用after伪元素的方式来给该容器添加一个下边框

.main:after{
			position:absolute;
			left:0;
			bottom:0;
			content:"";
			width:100%;
			border-top:1px solid red;
		}

然后我们用媒体查询的方式来实现统一样式

/*当物理设备像素比为1.5时*/
		@media (-webkit-min-device-pixel-radio:1.5),(min-device-pixel-radio:1.5) {
			.main:after{
				-webkit-transform:scaleY(0.7)
                                 transform:scaleY(0.7)
			}
			/*1.5乘以0.7接近于1px*/
		}
/*当物理设备像素比为2时*/
		@media (-webkit-min-device-pixel-radio:2),(min-device-pixel-radio:2) {
			.main:after{
				-webkit-transform:scaleY(0.5)
                                 transform:scaleY(0.5)
			}
			/*2乘以0.5等于1px*/
		}

同理，如果我们需要为该容器设置上边框，我们可以用before伪元素添加

.main:before{
			position:absolute;
			left:0;
			top:0;
			content:'';
			width:100%;
			border-bottom:1px solid red;
		}

然后我们用媒体查询的方式来实现统一样式

/*当物理设备像素比为1.5时*/
		@media (-webkit-min-device-pixel-radio:1.5),(min-device-pixel-radio:1.5) {
			.main:before{
				-webkit-transform:scaleY(0.7)
                                 transform:scaleY(0.7)
			}
			/*1.5乘以0.7接近于1px*/
		}
/*当物理设备像素比为2时*/
		@media (-webkit-min-device-pixel-radio:2),(min-device-pixel-radio:2) {
			.main:before{
				-webkit-transform:scaleY(0.5)
                                 transform:scaleY(0.5)
			}
			/*2乘以0.5等于1px*/
		}

我们也可以用css预处理器stylus实现，

新建一个mixin.styl文件

border-1px($color)
  position:relative
  &:after
    display:block
    position:absolute
    left:0
    bottom:0
    width:100%
    border-top:1px solid $color
    content:''
@media (-webkit-min-device-pixel-radio:1.5),(min-device-pixel-ratio:1.5)
  .main
    &::after
      -webkit-transform:scaleY(0.7)
      transform:scaleY(0.7)
    
@media (-webkit-min-device-pixel-radio:2),(min-device-pixel-ratio:2)
  .main
    &::after
      -webkit-transform:scaleY(0.5)
      transform:scaleY(0.5)

调用该mixin