如何在Dot Less中将％转换为rem

Question

我使用Dot Less并尝试使用媒体查询创建响应式框架。

示例：如果视口的宽度为600px（我不使用像素btw - 它只是为了便于说明） - 我根据2列布局计算边距 - 2.5％（15px ）每个保证金，其中有4个。

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

但是我也想将这个边距应用到其他内部容器 - 问题是内部容器不一定与视口的宽度相同，因此在300px宽的内盒上的2.5％将是7-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>

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