移动端像素border的实现

  在移动端中,不同的显示器物理设备像素比不一样,可能导致的结果就是当统一设置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

.main
   border-1px(red)

(完)


 

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏

caimaomaocai

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者