1px物理像素实现

Alice_LMY

于 2022-07-10 10:47:28 发布

阅读量225

点赞数

分类专栏：记录文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Alice_Lee_Lee/article/details/125703229

版权

记录专栏收录该内容

26 篇文章 0 订阅

订阅专栏

方式一：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      #box {
        width: 0.1rem;
        height: 0.1rem;
        border-bottom: 1px solid #000;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div id="box"></div>
    <script>
      // 像素比 = 物理像素 / css像素
      window.onload = function () {
        // 获取像素比
        var dpr = window.devicePixelRatio;
        // 缩放比例
        var scale = 1 / dpr;
        // 页面宽度
        var width = document.documentElement.clientWidth;
        // 获取meta标签，修改像素比
        var metaNode = document.querySelector('meta[name="viewport"]');
        metaNode.setAttribute(
          "content",
          `width=device-width, initial-scale=${scale}, user-scalable=no`
        );
        // 页面中的元素宽度和高度，比例反向乘回来
        var htmlNode = document.querySelector("html");
        htmlNode.style.fontSize = width * dpr + "px";
      };
    </script>
  </body>
</html>

方式二：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      #box {
        width: 200px;
        height: 200px;
        position: relative;
      }

      #box::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background-color: #000;
      }

      @media screen and (-webkit-min-device-pixel-ratio: 2) {
        #box::before {
          transform: scaleY(0.5);
        }
      }

      @media screen and (-webkit-min-device-pixel-ratio: 3) {
        #box::before {
          transform: scaleY(0.333);
        }
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div id="box"></div>
    <script>
      // 像素比 = 物理像素 / css像素
      window.onload = function () {
        var dpr = window.devicePixelRatio;
        console.log(dpr);
      };
    </script>
  </body>
</html>