Question

有人可以向我解释一下calc(.333 * (100vw - 12em))在以下HTML行中的含义吗？特别是.333的价值;它来自哪里？

sizes="(min-width: 36em) calc(.333 * (100vw - 12em)),
       100vw"

取自http://ericportis.com/posts/2014/srcset-sizes/

长度可以是各种各样的东西！长度可以是绝对的（例如， 99px，16em）或相对（33.3vw，如我们的例子）。你会注意到，与我们的示例不同，有许多布局将两者结合在一起绝对和相对单位。这令人惊讶得到了很好的支持calc（）函数。假设我们添加了一个12em 侧栏到我们的3列布局。我们会调整我们的尺寸属性这样：

sizes="(min-width: 36em) calc(.333 * (100vw - 12em)),
       100vw"

我理解这一点：

（min-width：36em）=媒体查询
calc（.333 *（100vw - 12em））=渲染图像尺寸
100vw =默认渲染图像长度

Answer 1

让我们剖析这个表达：

calc(.333 * (100vw - 12em))

calc表示评估为表达式。

vw是视图宽度的1%，因此100vw是视图宽度的100%。

em是大写m（M）的宽度，因此12的宽度为12 ems，或宽度为：MMMMMMMMMMMM

因此，

100vw - 12em的宽度减去12 M。如果这篇文章有一个视图的宽度，那就像是：

      / from here                                                         to here \

MMMMMM------------------------------------------------------------------------------MMMMMM

.333约为1/3，因此这将是上面宽度的三分之一。所以，这个宽度看起来像是：

      / from here      to here \                          / or from here  to here \

MMMMMM------------------------------------------------------------------------------MMMMMM

Answer 2

嗯，这意味着几乎正好三分之一（0.33 ......）（百分之百的视口宽度减去12em）。

假设我们在3列布局中添加了12em侧边栏。我们会调整我们的尺寸属性如此......

所以，显然他有三列布局（因此0.33 ......三分之一），他想为12em宽的柱子腾出空间。所以他从calc（）

中获取了它

希望你现在得到它。

Answer 3

我喜欢用JS测试CSS维度，你可以彻底弄清楚值和单位之间的关系是如何工作的。

＆＃13;

input[type='range'] {
  width: 60%;
}

p {
  margin:0;
  font-family:monospace;
}

#samp {
  background-color:#33aaff;
  height:40px;
  margin-top:10px;
}

＆＃13;

<form action="" id="myForm">
  <fieldset>
    <label>
      <input type="range" value=".333" min=".1" max="1" step=".001" data-unit="">
      <span>.333</span>
    </label>
    <label>
      <input type="range" value="100" min="1" max="100" step="1" data-unit="vw">
      <span>100vw</span>
    </label>
    <label>
      <input type="range" value="12" min="0" max="50" step=".2" data-unit="em">
      <span>12em</span>
    </label>
  </fieldset>
  <fieldset>
    <p id="output"></p>
  </fieldset>
</form>


<div id="samp"></div>

＆＃13;

<Form onSubmit={handleSubmit(requestAccountsFilter)}>
        <FormGroup row>
          <Field
            id="symbol"
            name="symbol"
            type="text"
            component={inputField}
            placeholder="Enter Product Here"
          />
          <Field id="side" name="side" component={inputField} type="select">
            <option value={null}>Any</option>
            <option value="Buy">Buy</option>
            <option value="Sell">Sell</option>
          </Field>
          <Field id="status" name="status" component={inputField} type="select">
            <option value={null}>Any</option>
            <option value="Working">Working</option>
            <option value="Completed">Completed</option>
          </Field>
          <Button name="submit-btn" className="filter-submit-btn" color="danger" type="submit">
        Submit
      </Button>
    </FormGroup>
  </Form>

＆＃13;

calc（.333 *（100vw - 12em））是什么意思？

3 个答案: