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

【问题标题】：CSS issue on zooming browser - Element is disappearing from view on zooming缩放浏览器上的 CSS 问题 - 缩放时元素从视图中消失
【发布时间】：2018-05-02 01:42:22
【问题描述】：

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

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

请检查以下代码sn-ps：

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

&lt;div id="test1"&gt;&lt;/div&gt;

有人知道这个吗？我可以用 CSS 解决这个问题吗？这是在所有缩放级别中都可见的元素。

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

【问题讨论】：

标签： javascript jquery html css browser

【解决方案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 的解决方案。
您也可以使用媒体标签，例如 (at)media (max-width:771px){ }