移动端 1px 问题

• 移动端（手机等）已成为人们最常用的设备，为了让用户用得爽，看得服务是不够的，所以有时候你还得丝毫不差的把设计稿给搬到网页上。但是目前市面上的手机屏幕大致分为一倍屏、二倍屏和三倍屏。这就导致了明明是 1px 的线条到手机上显示就是 2px 、3px 了。这个时候，设计书就会跟你讨论这样一个问题：为什么这条线看起来比我原型稿的粗一些，这也太粗了吧？诸如此类的话，让你连反驳的机会都没有... 好了，废话不多说，直接上答案了

方案一：直接来个 1px 的图片做背景图

• 优点：简单 方便 快捷 明了
• 缺点：换个颜色什么的就只能 g g 了

方案二：使用伪类 :after 、定位 position 、 缩放 transform:scale 来实现

• 优点：颜色 高度随便定

• 缺点：代码说多也不多，说少也不少

• 使用 border-bottom 实现

  	.border-buttom{
  	    position: relative;
  	}
  
  	.border-buttom:after {
  	    border-bottom: 1px solid #bfbfbf;
  	    content: ' ';
  	    display: block;
  	    width: 100%;
  	    position: absolute;
  	    left: 0;
  	    bottom: 0;
  	    -webkit-transform-origin: left bottom;
  	}
  
  
  	/* Retina 适配 */
  	@media only screen and (-webkit-min-device-pixel-ratio: 2.0),
  	only screen and (min--moz-device-pixel-ratio: 2.0),
  	only screen and (-o-min-device-pixel-ratio: 200/100),
  	only screen and (min-device-pixel-ratio: 2.0) {
  	    .border-buttom:after {
  	        -webkit-transform: scaleY(0.5);
  	        transform: scaleY(0.5);
  	    }
  	}
  
  
  	/* 三倍屏 适配 */
  	@media only screen and (-webkit-min-device-pixel-ratio: 2.5),
  	only screen and (min--moz-device-pixel-ratio: 2.5),
  	only screen and (-o-min-device-pixel-ratio: 250/100),
  	only screen and (min-device-pixel-ratio: 2.5) {
  	    .border-buttom:after{
  	        -webkit-transform: scaleY(0.33333334);
  	        transform: scaleY(0.33333334);
  	    }
  	}
  

• 使用 background 实现

  	.border-buttom{
  	    position: relative;
  	}
  
  	.border-buttom:after {
  		position: absolute;
  		right: 0;
  		bottom: 0;
  		left: 0;
  		height: 1px;
  		content: '';
  		background-color: #bfbfbf;
  	}
  
  
  	/* Retina 适配 */
  	@media only screen and (-webkit-min-device-pixel-ratio: 2.0),
  	only screen and (min--moz-device-pixel-ratio: 2.0),
  	only screen and (-o-min-device-pixel-ratio: 200/100),
  	only screen and (min-device-pixel-ratio: 2.0) {
  	    .border-buttom:after {
  	        -webkit-transform: scaleY(0.5);
  	        transform: scaleY(0.5);
  	    }
  	}
  
  
  	/* 三倍屏 适配 */
  	@media only screen and (-webkit-min-device-pixel-ratio: 2.5),
  	only screen and (min--moz-device-pixel-ratio: 2.5),
  	only screen and (-o-min-device-pixel-ratio: 250/100),
  	only screen and (min-device-pixel-ratio: 2.5) {
  	    .border-buttom:after{
  	        -webkit-transform: scaleY(0.33333334);
  	        transform: scaleY(0.33333334);
  	    }
  	}
  

方案三：通过 js 获取设备像素比，动态添加 <meta name="viewport"> 标签

• 优点：页面渲染过程中会自动根据屏幕显示
• 缺点：设置了缩放导致其他元素跟着缩放

<script type="text/javascript">
   (function() {
       var scale = 1.0;
       if (window.devicePixelRatio === 2) {
           scale *= 0.5;
       }
       if (window.devicePixelRatio === 3) {
           scale *= 0.333333;
       }
       var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale +', minimum-scale=' + scale + ', width=device-width, user-scalable=no" />';
       document.write(text);       
    })();
</script>

转载于:https://my.oschina.net/mayxu/blog/1593495