css minmax无效的属性值

Question

我想为2.5em设置rem属性。但出于某种原因，我无法让它发挥作用。

这是我的代码：

em

当我检查Chrome中的class Solution { public boolean isValid(String s) { if (s.length() < 2) { return false; } for (int i = 0; i < s.length() - 1; i++) { char char1 = s.charAt(i); char char2 = s.charAt(i + 1); if ((int) char1 != (int) char2) { return false; } } return true; } } 课程时，它只是说＆＃34;无效的属性值＆＃34;对于minmax属性。

我只想要一个2列布局，当视口变窄时，它会成为1列布局。

Answer 1

我认为这就是你所追求的：

grid-template-columns: repeat(2, minmax(320px, 1fr));

对于较小的屏幕，您需要一列，请使用媒体查询来运行：

grid-template-columns: 1fr;

minmax()表示法需要正确的语法。

可以说大多数CSS属性，除了在这种情况下，由于许多选项和变体，语法有点复杂，不容易理解。换句话说，创建无效规则相对容易。

minmax()的正确语法详见下表（taken from the spec）。

请注意，跟踪列表中没有minmax()后跟另一个minmax()的选项。这就是你的规则无效的原因。

以下是完整的解释：

• 7.2. Explicit Track Sizing: the grid-template-rows and grid-template-columns properties

Answer 2

minmax（）CSS函数定义大于或等于min且小于或等于max的大小范围。

/* <inflexible-breadth>, <track-breadth> values */
minmax(200px, 1fr)
minmax(400px, 50%)
minmax(30%, 300px)
minmax(100px, max-content)
minmax(min-content, 400px)
minmax(max-content, auto)
minmax(auto, 300px)
minmax(min-content, auto)

/* <fixed-breadth>, <track-breadth> values */
minmax(200px, 1fr)
minmax(30%, 300px)
minmax(400px, 50%)
minmax(50%, min-content)
minmax(300px, max-content)
minmax(200px, auto)

/* <inflexible-breadth>, <fixed-breadth> values */
minmax(400px, 50%)
minmax(30%, 300px)
minmax(min-content, 200px)
minmax(max-content, 200px)
minmax(auto, 300px)