css - 像素边框和百分比宽度比例

Question

我想我可能已经知道这个问题的答案，但我需要进行完整性检查!

说我有

#gridtest{
width:590px;
}

我可以使用 RESULT=TARGET/CONTEXT 将宽度更改为百分比。在这种情况下，上下文是一个最大宽度设置为 1000px 的容器，所以我可以这样做:

#gridtestpercent{
width:59%; /*590/1000*/
}

如果我要缩小窗口，div 将始终与其容器成比例。但是如果我想做什么呢

#gridtest{
width:570px;
border:10px solid red;
}

我可以根据现在为 570 的目标计算出宽度，但随着窗口缩小，所有比例都不同步。

#gridtestpercentnoborder{
width:57%; /*570/1000*/
border:10px solid red;
}

我不能使用百分比边框。我不想使用 JS 来继续检查上下文，我还不能使用 CSS3 box-border 声明。

如果我想使用 Ethan Marcotte 在响应式网页设计中描述的技术，其中所有内容都相对于彼此缩小，如果使用边框，我会倒霉吗？

干杯!

Answer 1

您可以使用 CSS3 calc() 函数，

.selector{
  border: 5px solid black;
  width: -moz-calc(50% - 10px);
  width: -webkit-calc(50% - 10px);
  width: calc(50% - 10px);
}

SASS 混合

@mixin calc($property, $expression) {
  #{$property}: -moz-calc(#{$expression});
  #{$property}: -webkit-calc(#{$expression});
  #{$property}: calc(#{$expression});
}
article {
  border: 1px solid red;
  @include calc( width, '100% - 2px')
}