zoukankan      html  css  js  c++  java
  • 解决移动端1px变粗的问题

    1px变粗的主要原因是:通俗的讲就是高清屏,分辨率提高了,但屏幕尺寸却没变化,这就意味着同样大小的屏幕上,像素却多,这时,一个css像素就不再等于一个物理像素,所以我们就看到粗了。  具体原因可以参看这篇文章:https://www.cnblogs.com/2050/p/3877280.html

    我这里就提供几种方法(如果有其他方法,欢迎补充):

    1.通过js控制,在Retina屏下,显示0.5px

    if(window.devicePixelRatio >=2 || devicePixelRatio >= 2){
        $(".contact-dialog .button-tool .tel").css("border-width","0.5px")
        $(".contact-dialog .button-tool .cancel").css("border-width","0.5px")
    }

    2.通过css的transform + 伪元素

    .scale-1px::after{
        content:'';
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 1px;
        transform: scaleY(0.5);
        -webkit-transform: scaleY(0.5);
        -ms-transform: scaleY(0.5);
        background: #e4e4e4;
    }
  • 相关阅读:
    The Tamworth Two chapter 2.4
    USACO Controlling Companies chapter 2.3 已跪
    非递归快排
    链表二路归并
    Money Systems chapter 2.3 dp
    #pragma pack与sizeof union
    快慢指针
    12
    11
    10
  • 原文地址:https://www.cnblogs.com/zsj-02-14/p/13523409.html
Copyright © 2011-2022 走看看