1

我正在使用 JavaScript 和 CSScolumn-width布局来计算浏览器窗口中每个新列的断点。对于每个新列，我还增加了计算第二个断点的页边距，以便它们适合。

我的一切都在使用中root.classList.add(myCss)，root.classList.remove(myCss)但对于页边距，如果可能的话，我更愿意更新单个 css 变量--page-margins，而不是添加和删除 css 边距类。

在下面的示例中，当我加载页面并且两列适合浏览器窗口时，正确的--page-margin应该是 16，但 Chrome 检查器显示 24。看起来当页面加载时，matchMedia 事件会检查每个媒体查询，如果没有match 它将 css 变量设置--page-margins为 (cols - 1)，如果该事件先前匹配，我只需要它来执行此操作。

页面加载后，如果我增加和减少浏览器宽度，一切正常。我可以实现这一点的一种方法是使用某种有条件的“如果事件不匹配......”？

document.addEventListener('DOMContentLoaded', function() {
  grid();
});

// The grid system
function grid() {

  const root = document.documentElement;
  const columnWidth = 239;
  const columnGap = 1;
  const columnMin = columnWidth + columnGap;
  const scrollbar = 20;
  let margins = parseInt(window.getComputedStyle(root).getPropertyValue('--page-margins'), 10);


  // Page margins
  const marginOne   =  8;
  const marginTwo   = 16;
  const marginThree = 24;
  const marginFour = 32;
  
  mediaQuery(2);
  mediaQuery(3);
  mediaQuery(4);
  
  // Media queries for columns
  function mediaQuery(cols) {

    let marginStyles = window.matchMedia('(min-width: ' + columns(cols)  + 'px)');
    marginStyles.addEventListener('change', addMargins);
    addMargins(marginStyles);

    function addMargins(e) {

      if (e.matches) {
        root.style.setProperty('--page-margins', setMargins(cols) + 'px');
        margins = parseInt(window.getComputedStyle(root).getPropertyValue('--page-margins'), 10);

      }
      else {
        root.style.setProperty('--page-margins', setMargins((cols - 1)) + 'px');
        margins = parseInt(window.getComputedStyle(root).getPropertyValue('--page-margins'), 10);

      }
    }

  }

  // Return the screen width (breakpoint) at num columns
  function columns(num) {
    setMargins(num);
    let breakpoint = (columnMin * num) - columnGap + (padding * 2) + scrollbar;
    return breakpoint;
  }

  // Set the margin for each column number
  function setMargins(num) {
    if (num == 4) {
      padding = marginFour;
    } else if (num == 3) {
      padding = marginThree;
    } else if (num == 2) {
      padding = marginTwo;
    } else {
      padding = marginOne;
    }
    return padding;
  }

}
4

1 回答 1

0

我在发帖后不久就想通了。我需要在事件的 else 语句中嵌套第二个条件来检查 css 变量的值--page-margins。该变量margins在脚本的其他地方被引用，所以我在事件匹配和不匹配时更新它。

一切正常。

function addMargins(e) {
    if (e.matches) {
        root.style.setProperty('--page-margins', setMargins(cols) + 'px');
        margins = parseInt(window.getComputedStyle(root).getPropertyValue('--page-margins'), 10);

    }
    else {
        if (margins == setMargins(cols)) {
            root.style.setProperty('--page-margins', setMargins((cols - 1)) + 'px');
            margins = parseInt(window.getComputedStyle(root).getPropertyValue('--page-margins'), 10);
        }
    }
}
于 2021-02-06T21:13:04.720 回答