2017-11-18 334 views
0

div随高度1px的和宽度100px的。现在我将网页从100%缩小到80%或更少(67%或50%或33%)。元素在特定缩放级别隐藏不可见。但它在DOM结构中可用。CSS问题 - 元素从视图中消失的放大

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

请检查下面的代码片段:

#test1{ 
 
    width: 100px; 
 
    height: 1px;  
 
    background-color:blue; 
 
}
<div id="test1"></div>

不要任何人有这个想法?我能用CSS解决这个问题吗?这是在所有缩放级别都可见的元素。

注:我使用ctrl+ctrl和鼠标滚轮缩放网页。

回答

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

+0

是改变高度值。我期待用CSS解决方案。 –

+0

也可以使用媒体标签,例如 (at)media(max-width:771px){} – piscu