Javascript 是否可以设置元素'；s利润率最高为另一要素的60%'；SCSS的高度是多少？

问题说明了一切。 是否可以使用SCSS将一个元素的边距顶部设置为另一个元素高度的60%

我正在开发一个Ionic 2应用程序，目标是浏览器、Android、iOS和Windows Phone。以下是要素：

  <div class='logoBox'>
    <img src="assets/img/-.png" class="corner-logo" alt="-" />
    <img src="assets/img/icon.png" class="logo" id="logo" alt="-" />
  </div>
  <div class='headerBox' id="headerBox">...</div>

我当前的方法可以在浏览器中使用，但当作为应用程序在真实设备上运行时，“orientationchange”事件侦听器只会在某些时候启动，这在视觉效果中很明显

那么，是否有可能通过SCS实现同样的效果，从而使其在任何地方都能工作？

---

如果没有，我可以用JS实现吗？

您需要记住，scss输出到有效的CSS。它没有向前端添加任何新内容，只是（希望）简化了后端（例如，通过添加意味着您不必自己进行计算和值转换的功能）

所以问题真的变成了“你能在CSS中做到这一点吗？”

---

正如ddeadlink所指出的，如果徽标元素的高度是固定的（或者可以调整设计使其固定），则可以将高度设置为变量，并使用scss计算其60%。如果不是，那么你就只能用JS更新了。

我不确定这是否是一个答案，但无论如何

SCSS

---

因此，事实上，您只是使用

变量

作为scss中的“糖”

您是否尝试将这些元素高度放入变量中？然后用

$thoseVariableHeight*60/100

转换您需要的元素边距？我是一个SCSS noob，所以对此一无所知。我必须试一试。

  ionViewDidEnter(){
    document.getElementById('headerBox').style.marginTop = Math.round(Number(document.getElementById('logo')['height']) * 0.6) + 'px';
    window.addEventListener('orientationchange', () => {
      document.getElementById('headerBox').style.marginTop = Math.round(Number(document.getElementById('logo')['height']) * 0.6) + 'px';
    });
  }

$marginVar = 200px // for example 
.element-with-height{
 margin-top: $marginVar ;
}
// if those elements that you want to affect is not nested inside `.element-with-height`
.affected-elements{
 height: $marginVar * 60 / 100   // so you get 60% as from the question
}