Question

我有一个带有装饰性边框（上，右，下，左）的布局，这些边框不包含内容，但是包含华丽的SVG模式。

这些边框是使用grid-template-columns和grid-template-rows grid属性定义的，高度或宽度为70像素。

当用户将其浏览器缩放级别设置为125％，150％，200％时，元素的大小将按比例缩放（87px，105px，140px）

如何根据用户的浏览器缩放输入来防止某些网格区域（顶部，右侧，底部，左侧）增大/缩小。

.stage-inner {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 70px 1fr 1fr 1fr 70px;
  grid-template-rows: 70px 1fr 1fr 1fr 70px;
  grid-template-areas:
    "top top top top top"
    "left content content content right"
    "left content content content right"
    "left content content content right"
    "bottom bottom bottom bottom bottom";
}

https://codepen.io/MathiasaurusRex/pen/bzBdmX

Answer 1

您可以尝试访问设备像素比率，然后将尺寸除以该百分比以重新计算将以70px呈现的尺寸。

$( window ).on( 'load resize', function() {
    const browserZoomLevel = Math.round(window.devicePixelRatio * 100);
    const normalizedDimension = 70 * 100 / browserZoomLevel + 'px';

    $( '.stage-inner' )
        .css( 
            'gridTemplateColumns', 
            normalizedDimension + ' 1fr 1fr 1fr ' + normalizedDimension 
        ).css(
           'gridTemplateRows', 
            normalizedDimension + ' 1fr 1fr 1fr ' + normalizedDimension 
    );
});

https://codepen.io/Jason_B/pen/GzNZZd

我分叉了您的codepen并添加了以下jQuery代码：

        if (0 === strpos($realPath, $directory)) {
            return true;
        }
    }

防止用户缩放浏览器时增加/减小网格区域大小

1 个答案: