缩放浏览器上的CSS问题-缩放视图中的元素消失了

Question

我有div用1px的高度和宽度100像素 。 现在，我将网页从100％缩放到80％或以下（67％或50％或33％）。 现在，该元素在特定缩放级别下不可见。 但是它在DOM结构中可用。

然后，当我去开发菜单并将height的值从“ 1px”更改为“ 2px”或“ 3px”时，该元素就会出现在视图中。

请检查以下代码段：

 #test1{ width: 100px; height: 1px; background-color:blue; } 

 <div id="test1"></div> 

有人对此有想法吗？ 我可以使用CSS修复此问题吗？ 这是在所有缩放级别中可见的元素。

注意：我正在使用ctrl和+或ctrl和鼠标滚轮来缩放网页。

Answer 1

您可以更改任何缩放级别的高度值

  $(window).resize(function() {
    var zoomLevel = window.devicePixelRatio;
    if(zoomLevel < 0.67 && zoomLevel > 0.3){
     $("#test1").css({ 'height': '3px' });
    }else{
      $("#test1").css({ 'height': '1px' });
    }
  });

https://codepen.io/piscu/pen/EboKLX