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

我正在使用Dos Less，并尝试使用媒体查询创建一个响应式框架。

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

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

但是，我还想将该边距应用于其他内部容器-问题是内部容器的宽度不一定与视口相同，因此在300px宽的内部框上为2.5％-将为7-8px 。

我想是否可以将％转换为像素或rems可以解决此问题，但我无法使其正常工作。

我希望对这个问题有任何帮助，或者有我不知道的更好的解决方案？

最佳答案

查看我的评论，也许您可以尝试以下方法：

的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>

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

关于css - 如何在％Dot Less中将％转换为rem，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25810681/

less

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