1物理像素的实现

最新推荐文章于 2023-02-08 11:03:54 发布

学学学无止境

最新推荐文章于 2023-02-08 11:03:54 发布

阅读量818

点赞数 2

分类专栏： CSS Web前端面试题

本文链接：https://blog.csdn.net/weixin_46872121/article/details/110264496

版权

CSS 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

Web前端面试题

15 篇文章 0 订阅

订阅专栏

1.对于1物理像素问题（不会出现在pc端，因为pc的像素比永远为1，而物理像素为1时，此时css自然为1），因此你写的css像素和物理像素永远时一对一的关系
像素比=物理像素/css像素
2.在移动中，不同设备其dpr即像素比不一样，可为2、3等，因此当你在dpr为2的移动端设置1px的css像素时，对应2物理像素，因此会达不到我们想要的效果
3.解决–通过操作meta标签上的缩放比（即initial-scale）

当initial-scale为1时，表示没有进行任何的缩放，而现在我想要把1px的css像素变成1px物理像素。
比如我dpr=2时，那么1px物理像素对应0.5px的css像素
而在浏览器中不支持小于1的css像素书写的
因此我们需要操作的缩放比：scale=1/dpr，（通俗的将就是当dpr=2时，你设置1px的css像素，得到的时一个防抖效果，而控制缩放比scale=1/2，即缩小了你设置的1pxcss像素），以使得1px物理像素对应1pxcss像素
代码：

在这里插入图片描述
4.当设置好缩放比之后(不管是rem单位还是px单位都会收到影响），会出现新的问题，比如你设置的某个元素使用200px写定大小时，此时元素也会搜到缩放比的影响，会比你实际效果小（这里改了缩放比为1/2，原来时1），因此我们可以联系rem单位来动态还原元的的效果
-------rem要联想到用根元素的字体大小来控制--------
即将元素设置成rem的单位
思路：
1.将固定单位px—换成相对单位rem
2.获取屏幕宽
3.对缩放完成的比例，然后反向乘dpr（因为缩放比为1/dpr，这样才能抵消缩放比带来的影响）
比如：原来元素设置的大小为200px✖200px，而缩放之后比例为100px✖100px，而上面提到的scale=1/2=0.5，因此进行0.5✖1/0.5即0.5✖2（2即为dpr–当dpr为其他时亦是同理，通过js动态获取即可）
实现代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .test {
      width: 0.5rem;/*用上相对单位*/
      height: 0.5rem;
      /* width: 200px;绝对单位
      height: 200px; */
      background-color: pink;
      border-bottom: 1px solid #666;
    }
  </style>
</head>

<body>
  <div class="test"></div>
  <script>
    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>