小编Pet*_*ers的帖子

在CSS Grid中,为什么1FR + 9FR在小屏幕尺寸下的表现与10FR相同?

所以我在CSS Grid中定义了一个布局,需要这个特定的行具有相同大小的输入.我可以做数学并且只指定百分比并且它工作正常(参见注释掉的行)但是当我通过小数单位(fr)指定它时,跨越的列"squishes"比非跨越的列更多.

.A {
  grid-area: a;
}

.B {
  grid-area: b;
}

.C {
  grid-area: c;
}

.Exchange_Row {
  display: grid;
  grid-template-columns: 1fr 9fr 10fr 10fr 1fr;
  /*
   grid-template-columns:  3% 27% 30% 30% 3%;
  */
  grid-template-areas: "a a b c ."
}

input[type=text] {
  border: solid;
}
Run Code Online (Sandbox Code Playgroud)
<div style="width: 90%; border: solid; border-radius: 5px; padding: 5px;">
  <div id="currencyRow" class="Exchange_Row">
    <input type="text" class="A" value="A" />
    <input type="text" class="B" value="B" />
    <input type="text" class="C" value="C" />
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

当我将其调整为窄视图(窄于598)时,A继续变小(低至127px)但B和C保持相同,为169px.

如果我使用fr单位注释掉grid-template-columns行,而是使用下面的百分比,那么它可以正常工作.

以下屏幕截图显示了使用fr单位定义列时的不同大小(如上面的代码所示):

A尺寸为127px

B尺寸为169px

C尺寸为169px

任何人都可以帮助我理解为什么会这样吗?我预计A会停在169px,否则B和C会继续收缩到127px,因为它们的定义几乎相同.

css css3 css-grid

5
推荐指数
1
解决办法
109
查看次数

标签 统计

css ×1

css-grid ×1

css3 ×1