Question

我有div，身高 1px ，宽 100px 。现在我将我的网页从100％缩放到80％或更低（67％或50％或33％）。现在，在某个缩放级别隐藏元素。但它在DOM结构中可用。

然后当我去开发菜单并从＃34; 1px＆＃34;更改高度值至＆＃34; 2px＆＃34;或＆＃34; 3px＆＃34;，元素出现在视图中。

请检查以下代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

有人对此有所了解吗？我可以用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

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

1 个答案: