CSS問題 - 元素從視圖中消失的放大

我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和鼠標滾輪縮放網頁。

來源

2017-11-18 John R

您可以爲任意縮放級別

$(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

來源

2017-11-18 10:32:26 piscu

是改變高度值。我期待用CSS解決方案。 –

也可以使用媒體標籤，例如（at）media（max-width：771px）{} – piscu

CSS問題 - 元素從視圖中消失的放大

回答

相關問題