如何在％中將％轉換爲rem更少

我正在使用Dot Less並嘗試使用媒體查詢創建響應式框架。例如：如果一個視口的寬度爲600px（我沒有使用像素btw--這僅僅是爲了便於說明） - 我根據2列布局計算邊距 - 每個邊距爲2.5％（15px）其中有4個。如何在％中將％轉換爲rem更少

我對1列和3列布局做類似的事情。所有這些工作正常。

但是我也想把這個邊距應用到其他內部容器 - 問題是內部容器不一定會與視口寬度相同，因此2.5px寬度的內部盒子會打開是7-8px。

我想如果有可能將％轉換爲像素或雷姆可能會解決問題，但我不能得到這個工作。

我很感謝這個問題的任何幫助，還是有更好的解決方案可用，我不知道？

來源

2014-09-12 dotnetnoob

我不認爲更少有任何內置函數用於此計算，但您可以使用[此線程]中提到的邏輯（http://stackoverflow.com/questions/11352783/how-to-計算-rem-for-type）來計算它（也許通過將根字體大小設置爲變量）。 – Harry 2014-09-12 14:44:33

感謝您的回覆 - 我已經在鏈接字體大小的東西，但是，我正在尋找一致的邊際寬度貫穿所有容器 - 不幸的是雷姆斯是不流暢的像％ – dotnetnoob 2014-09-12 14:52:38

我認爲你可以讓你的利潤一些使用媒體查詢的流體：「margin：0.5rem; @media（min-width：600px）{margin：1rem;} @media（min-width：900px）{margin：1.5rem;}' – 2014-10-20 20:27:42

見我的評論，可能是你可以嘗試以下方法：

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>

前面的結果會像所示在下圖中：

enter image description here

來源

2014-10-20 21:40:36

如何在％中將％轉換爲rem更少

回答

相關問題