CSS问题 - 元素从视图中消失的放大

Question

我div随高度1px的和宽度100px的。现在我将网页从100％缩小到80％或更少（67％或50％或33％）。元素在特定缩放级别隐藏不可见。但它在DOM结构中可用。

然后，当我去开发菜单并将高度值从“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