手機實現1畫素邊框顯示

煙海之藍發表於2017-07-10
問題需求：頁面設定邊框1畫素時，電腦端顯示是正常的，手機端會顯示比正常粗一點。

1、給需要顯示1畫素邊框的元素新增偽類元素，設定邊框為1px。注意：這個時候和直接在元素本身設定邊框是一樣的效果，達不到真正顯示1畫素的問題。

2、然後用media 媒體查詢，設定偽類元素的縮放比例。 


    

  1. @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    2. 

  2.  .border-1px::after{
    3. 

  3.  -webkit-transform: scaleY(0.7);
    4. 

  4.  }
    5. 

  5. }
    6. 

  6. @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    7. 

  7.  .border-1px::after{
    8. 

  8.  -webkit-transform: scaleY(0.5);
    9. 

  9.  }
    10. 

  10. }
    11. 






 3、完整示例





    

  1. html
    2. 

  2. <div class="tab border-1px"></div>
    3. 

    4. 

  4. css
    5. 

  5.  .tab{
    6. 

  6.  display:flex;
    7. 

  7.  width:100%;
    8. 

  8.  height:40px;
    9. 

  9.  line-height:40px;
    10. 

  10.  position:relative;
    11. 

  11.  }
    12. 

  12.  .tab:after{
    13. 

  13.  display:block;
    14. 

  14.  position:absolute;
    15. 

  15.  width:100%;
    16. 

  16.  left:0;
    17. 

  17.  bottom:0;
    18. 

  18.  border-top:1px solid rgba(7,17,27,0.1);
    19. 

  19.  content:``;
    20. 

  20.  }
    21. 

    22. 

  22. base.css
    23. 

  23. @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    24. 

  24.  .border-1px::after{
    25. 

  25.  -webkit-transform: scaleY(0.7);
    26. 

  26.  }
    27. 

  27. }
    28. 

  28. @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    29. 

  29.  .border-1px::after{
    30. 

  30.  -webkit-transform: scaleY(0.5);
    31. 

  31.  }
    32. 

  32. }
    33. 

  33. 

    34. 

















相關文章