如何将%转换为实体

Question

我正在使用Dot，并试图创建一个带有媒体查询的响应框架。

示例:如果一个视口的宽度为600‘s(我不使用像素btw --这只是为了便于说明)--我根据2列布局计算边距--每个边距2.5% (15’s)，其中有4条。

对于1列和3列布局，我都做了类似的事情。这一切都很好。

不过，我也想把这个边距应用到其他内部容器中--问题是，内部容器不一定与视口的宽度相同，因此，在一个300 8px宽的内框上，2.5%的宽度是7-8 8px。

我想，如果可能的话，将%转换为像素或区域可能会解决这个问题，但我无法让它发挥作用。

我希望在这个问题上有什么帮助，或者有没有更好的解决方案，我不知道？

Answer 1

请看我的评论，也许你可以尝试以下几点：

css

body {
  margin: 0;
}
[class^="col-"], [class*=" col-"] {
float:left;
margin: 0 0.5rem;
background-color:purple;
}
[class^="col-"] [class*=" col-"],
[class^="col-"] [class^="col-"], 
[class*=" col-"] [class*=" col-"],
[class*=" col-"] [class^="col-"]
{
background-color:green;
}

.col-one {
width: calc(100% - 1rem);
}   
.col-half {
width: calc(50% - 1rem);
}   
.col-third {
width:  calc(33.33333333% - 1rem);
}   

@media (min-width: 48rem) {
[class^="col-"], [class*=" col-"] {
margin: 0 1rem; 
}
.col-one {
width: calc(100% - 2rem);
}   
.col-half {
width: calc(50% - 2rem);
}   
.col-third {
width:  calc(33.33333333% - 2rem);
}
}

@media (min-width: 60rem) {
[class^="col-"], [class*=" col-"] {
margin: 0 1.5625rem;    
}

.col-one {
width: calc(100% - 3.125rem);
}   
.col-half {
width: calc(50% - 3.125rem);
}   
.col-third {
width:  calc(33.33333333% - 3.125rem);
}

}

html

<div class="col-one">One</div>
<div class="col-half">Half</div>
<div class="col-half">Half</div>
<div class="col-third">Third</div>
<div class="col-third">Third</div>
<div class="col-third">Third</div>


<div class="col-half">
<div class="col-half">Half</div>
<div class="col-half">Half</div>
<div class="col-third">Third</div>
<div class="col-third">Third</div>
<div class="col-third">Third</div>
</div>  
<div class="col-half">
<div class="col-half">Half</div>
<div class="col-half">Half</div>
<div class="col-third">Third</div>
<div class="col-third">Third</div>
<div class="col-third">Third</div>
</div>

前面的结果将如下图所示：

​

​