有没有比在本例中使用matchMedia更聪明的方法来重新排列页面元素

Is there a smarter way to rearrange page elements than using matchMedia for this example?

本文关键字：新排列 排列 元素 方法 更聪明 matchMedia 有没有      更新时间：2023-09-26

我创建了以下页面布局，但它严重依赖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>

我研究了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>

相关文章：