javascript - 在这个例子中，有没有比使用 matchMedia 更聪明的方法来重新排列页面元素？

Question

我创建了以下页面布局，但它在很大程度上依赖于 javascript。我试过想其他方法来更简单地完成此操作，但想不出任何方法。

只是想知道是否有人有什么好主意可以在没有 javascript 的情况下实现这种布局？

var hero = document.getElementById ('hero');
var aside = document.getElementById ('aside');
var main = document.getElementById ('main');

var smallMql = window.matchMedia('(max-width: 739px)');
var mediumMql = window.matchMedia('(min-width: 740px) and (max-width: 979px)');
var largeMql = window.matchMedia('(min-width: 980px)');

function drawSmallGrid(mql) {
  if (mql.matches) {
	  aside.setAttribute('style', 'margin-top: 0');
  }
}

function drawMediumGrid(mql) {
  if (mql.matches) {
  	var mainHeight = main.clientHeight;
	  aside.setAttribute('style', 'margin-top: -' + mainHeight + 'px');
  }
}

function drawLargeGrid (mql) {
  if (mql.matches) {
    var mainHeight = main.clientHeight;
    var heroHeight = hero.clientHeight;
    var totalHeight = mainHeight + heroHeight;

    aside.setAttribute('style', 'margin-top: -' + totalHeight + 'px');
  }
}

smallMql.addListener(drawSmallGrid);
mediumMql.addListener(drawMediumGrid);
largeMql.addListener(drawLargeGrid);

drawSmallGrid(smallMql);
drawMediumGrid(mediumMql);
drawLargeGrid(largeMql);

/**
 * Grid
*/

.hero,
.main {
	box-sizing: border-box;
}

/* Content faking */
.hero .module {background:aqua;}
.main .module {background:red;}
.aside .module {background:orange}

.hero .module,
.main .module {
	min-height: 200px;
}

.aside .module {
	min-height: 400px;
}

/* Grid layout */
.hero,
.main,
.aside {
	padding-left: 15px;
	padding-right: 15px;
}

@media (min-width: 740px) {
  .main {
    margin-right: 330px;
    max-width: 70%;
  }
  
  .aside {
    width: 300px;
    float: right;
  }
}

<div id="hero" class="hero"><div class="module">hero</div></div>
<div id="main" class="main"><div class="module">main</div></div>
<div id="aside" class="aside"><div class="module">aside</div></div>

Answer 1

我调查了 flexbox，但它对于我的布局和 IE10+ 来说太复杂了。我实际上记得 css calc 值，它是 IE9+，它工作得很好，根本没有 javascript:

/**
* Grid
*/

.hero,
.main {
  box-sizing: border-box;
}

/* Content faking */
.module { padding: 10px; }
.hero .module { background: aqua; }
.main .module { background: red; }
.aside .module { background: orange; }

.hero .module,
.main .module {
  min-height: 200px;
}

.aside .module {
  min-height: 400px;
}

@media (min-width: 740px) {
  .module:after {
    display: inline;
    content: ' 740px+';
    font-style: italic;
  }
  
  .main {
    float: left;
    width: calc(100% - 330px);
  }
  
  .aside {
    float: right;
    width: 300px;
  }
}

@media (min-width: 980px) {
  .module:after {
    display: inline;
    content: ' 980px+';
    font-style: italic;
  }
  
  .container {
    width: calc(100% - 330px);
    float: left;
  }
  
  .main {
    float: none;
    width: 100%;
  }
}

<div class="container">
  <div id="hero" class="hero"><div class="module">hero</div></div>
  <div id="main" class="main"><div class="module">main</div></div>
</div>
<div id="aside" class="aside"><div class="module">aside</div></div>