问如何保持网格项目的大小时，网格跟踪收缩，以响应减少的视口分辨率？
EN

Stack Overflow用户

提问于 2021-12-21 16:27:21

回答 1查看 82关注 0票数 0

我采用桌面第一方法向我的网页添加响应性。但是，当视口分辨率在到达断点720 as之前降低时，图1中的“选项卡部分”(网格名：“选项卡”)将相应缩小。是否有任何方法来保持其大小，即使它变得大于网格轨道大小，如第二张图片(网格项目大于轨道的大小，但不分成两行)？顺便说一句，我还试图弄清楚如何使meta部分中的文本在到达断点之前不会中断到下一行(请看第二张图片)。任何关于如何实现的建议都是受欢迎的。

.flex {
  display:flex;
  gap: var(--gap,1rem);
}
.container-tabs * {
  background-color: transparent;
  border:none;
  cursor:pointer;
  font-size: 2rem;
}
.content-meta {
  --gap:2rem;
}
.content-meta p {
  font-size: 2.5rem;
}

@media (min-width: 720px) {
  .grid-container {
    display:grid;
    column-gap: 2rem;
    grid-template-columns: minmax(2rem, 1fr) repeat(2,minmax(0,30rem)) minmax(2rem, 1fr);
    grid-template-areas:
       '. title title .'
       '. image tabs .'
       '. image content .';
  }
  .grid-container > .container-title {
    grid-area: title;
  }
  .grid-container > .container-image {
    grid-area: image;
  }
  .grid-container > .container-tabs {
    grid-area: tabs;
  }
  .grid-container > .container-content {
    grid-area: content;
  }
  .container-image {
    display:block;
    max-width:100%;
  }

}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="testing.css">
  <title></title>
</head>

<body>
  <main class="grid-container">
    <h2 class="container-title">Pick one planet</h2>
    <img class="container-image"src="https://i.ibb.co/F80STD5/image-mars.webp" alt="LOGO">
    <div class="container-tabs">
      <button type="button">Moon</button>
      <button type="button">Mars</button>
      <button type="button">Titan</button>
      <button type="button">Europa</button>
    </div>
    <article class="container-content">
      <h1>MARS</h1>
      <p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
      <div class="content-meta flex">
        <div class="">
          <h2>Avg. distance</h2>
          <p>225 mil. km</p>
        </div>
        <div class="">
          <h2>Est. travel time</h2>
          <p>9 months</p>
        </div>
      </div>
    </article>
  </main>
</body>
</html>

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-12-21 16:47:37

实现所需内容的最简单方法是将属性“空格: you；”添加到每个文本元素中，以避免中断行。当然，你应该只给他们在断点，你需要他们停留在一条线。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70438607

复制

相似问题

问如何保持网格项目的大小时，网格跟踪收缩，以响应减少的视口分辨率？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何保持网格项目的大小时，网格跟踪收缩，以响应减少的视口分辨率？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何保持网格项目的大小时，网格跟踪收缩，以响应减少的视口分辨率？
EN