代码之家 › 专栏 › 技术社区 › Joel

CSS网格中自动放置更改的条件样式

css-grid css

Joel · 技术社区 · 5 年前

我正在寻找一种方法来检测 grid-auto-flow css属性已启用,并应用条件样式,例如较大的字体大小。

完整演示示例: Stackblitz (因为无法在Stackoverflow的代码段容器中调整大小)。

仅仅使用CSS就可以做到这一点吗?还是我在解决这个问题上走错了方向?

我需要 font-size: x 当屏幕变小时变大。我宁愿避免在这篇文章中引入任何javascript(和或)媒体查询。

除非有媒体查询可以检测到这种变化

main {
  display: grid;
  color: rgb(107, 107, 107);
  font-size: 1em;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-flow: row;
}

main section:first-child h1 {
  padding-left: var(--page-left-padding);
}

main section article {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

main section article div {
  align-self: center;
  font-size: 0.3em;
}

main section article div:last-child {
  padding-bottom: 3em;
}

main section article p {
  font-size: 1em;
}

ul,
li {
  text-decoration: none;
  list-style: none;
}

<main>
  <section>
    <h1>If you resize, this text will be positioned above, not to the side.</h1>
  </section>
  <section>
    <article>
      <p>Lorem Ipsum</p>
      <div>
        <li>Lorem ipsum dolor sit amet</li>
        <li>consectetur adipiscing elit</li>
        <li>Praesent iaculis tempor</li>
        <li>nulla nec rutrum. Donec eu purus</li>
        <li>uspendisse potenti</li>
        <li>libero sem sollicitudin</li>
      </div>
    </article>
    <article>
      <p>Mauris sem tortor</p>
      <div>
        <li>Lorem ipsum dolor sit amet</li>
        <li>consectetur adipiscing elit</li>
        <li>Praesent iaculis tempor</li>
        <li>nulla nec rutrum. Donec eu purus</li>
        <li>uspendisse potenti</li>
        <li>libero sem sollicitudin</li>
      </div>
    </article>
  </section>
</main>

0 回复 | 直到 5 年前

focus.style 5 年前

要检测屏幕宽度的变化,请使用媒体查询。你可以设定任何 font-size 根据你的媒体断点。我同意,媒体断点在使用时无法检测列数的变化 grid-template-columns auto-fit .但它很友好。

连接 网格模板列 计数和字体大小可以使用以下方法。

main {
  grid-template-columns: repeat(2, 1fr);
}
main section:first-child h1 {
  font-size: 28px;
}

@media (max-height: 475px) {
  main {
    grid-template-columns: repeat(1, 1fr);
  }
  main section:first-child h1 {
    font-size: 36px;
  }
}

或者,如果要计算列数并检测由 自动装配 -这是JavaScript的任务。

生成简单的JavaScript,计算第一列中的块数,比较它们的 offsetTop .然后我们计算CSS变量中的列数 --cols 例如,我们可以在任何地方使用它 font-size: calc(36px / var(--cols));

countCols();

window.addEventListener("resize", function() {
  countCols();  
});

function countCols() {
  let cols = 0;
  let mainOffsetTop = document.querySelector('main section').offsetTop; /* main offset top */
  let mainSections = document.querySelectorAll('main section'); 
  for (let i = 0; i < mainSections.length; i += 1) {
    /* (section offset top) and (main offset top) == for the first row elements */
    if((mainSections[i].offsetTop - mainOffsetTop) == 0) {
      cols++;
    } else {
      break;
    }    
  }
  // getting CSS variable in body
  document.documentElement.style.setProperty('--cols', cols);
}

main {
  display: grid;
  color: rgb(107, 107, 107);
  font-size: 1em;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-flow: row;
}

main section:first-child h1 {
  padding-left: var(--page-left-padding);
  font-size: calc(36px / var(--cols));
}

main section article {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

main section article div {
  align-self: center;
  font-size: 0.3em;
}

main section article div:last-child {
  padding-bottom: 3em;
}

main section article p {
  font-size: 1em;
}

ul,
li {
  text-decoration: none;
  list-style: none;
}

<main>
  <section>
    <h1>If you resize, this text will be positioned above, not to the side.</h1>
  </section>
  <section>
    <article>
      <p>Lorem Ipsum</p>
      <div>
        <li>Lorem ipsum dolor sit amet</li>
        <li>consectetur adipiscing elit</li>
        <li>Praesent iaculis tempor</li>
        <li>nulla nec rutrum. Donec eu purus</li>
        <li>uspendisse potenti</li>
        <li>libero sem sollicitudin</li>
      </div>
    </article>
    <article>
      <p>Mauris sem tortor</p>
      <div>
        <li>Lorem ipsum dolor sit amet</li>
        <li>consectetur adipiscing elit</li>
        <li>Praesent iaculis tempor</li>
        <li>nulla nec rutrum. Donec eu purus</li>
        <li>uspendisse potenti</li>
        <li>libero sem sollicitudin</li>
      </div>
    </article>
  </section>
</main>