时间戳

首页 > 解决方案 > CSS Flexbox 和响应式 - 非常经典的文章布局 - 可以在没有 JS 或 DOM 摆弄的情况下完成？

html - CSS Flexbox 和响应式 - 非常经典的文章布局 - 可以在没有 JS 或 DOM 摆弄的情况下完成？

问题描述

这就是我的目标：

在此处输入图像描述

这是我试过的代码。它是桌面第一个版本并且可以工作。但不是移动设备，我被告知要先对移动设备进行编码。如果可能的话，我想在没有 JS 的情况下同时设置桌面和移动“编排”。与 flexbox 互补的东西是一种选择。

html {
	box-sizing: border-box;
	font-size: 100%;
}
*, *:before, *:after {
	box-sizing: inherit;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  margin-right: -10px;
  margin-left: -10px;
}


.col-m-1 {
	width: 8.333%;
}
.col-m-2 {
	width: 16.667%;
}
.col-m-3 {
	width: 25%;
}
.col-m-4 {
	width: 33.333%;
}
.col-m-5 {
	width: 41.667%;
}
.col-m-6 {
	width: 50%;
}
.col-m-7 {
	width: 58.333%;
}
.col-m-8 {
	width: 66.667%;
}
.col-m-9 {
	width: 75%;
}
.col-m-10 {
	width: 83.333%;
}
.col-m-11 {
	width: 91.667%;
}
.col-m-12 {
	width: 100%;
}




@media (min-width: 769px){
	.col-d-1 {
		width: 8.333%;
	}
	.col-d-2 {
		width: 16.667%;
	}
	.col-d-3 {
		width: 25%;
	}
	.col-d-4 {
		width: 33.333%;
	}
	.col-d-5 {
		width: 41.667%;
	}
	.col-d-6 {
		width: 50%;
	}
	.col-d-7 {
		width: 58.333%;
	}
	.col-d-8 {
		width: 66.667%;
	}
	.col-d-9 {
		width: 75%;
	}
	.col-d-10 {
		width: 83.333%;
	}
	.col-d-11 {
		width: 91.667%;
	}
	.col-d-12 {
		width: 100%;
	}
}
<head>
	<meta charset="utf-8">
</head>
<body>
 <article class="grid article">
    <div class="my-img-supclass col-m-12 col-t-4 col-d-4">
      <img src="img.jpg">
    </div>
    <div class="col-m-12 col-t-8 col-d-8">
      <h2 class="article-h2"><span>a h2 title</span></h2>
      <p class="article-p">some content</p>
    </div>
  </article>
<body>

这在移动设备中不起作用，图像从第二个 div 开始就完全位于底部。

标签： htmlcssresponsive-designflexbox

解决方案

这是CSS Grid的一个很好的用例。CSS-Tricks 网站有一个很好的网格备忘单。所有主要浏览器都支持该功能。

这个想法是您将定义body（或容器div）以显示为网格，并带有命名的网格区域（通过grid-template-areas）。这些区域对应于图像、标题和正文。

然后，在您的媒体查询中，您可以重新映射网格布局。

我已将媒体查询设置为在 800 像素处触发，因此当您运行下面的堆栈片段时，您应该会看到移动视图。如果您单击片段上的“全屏”，您将看到桌面视图。

body {
  display: grid;
  grid-template-areas:
      "hero-image article-title"
      "hero-image article-body";
}

.hero-image {
  grid-area: hero-image;
  background: lime;
}

.article-title {
  grid-area: article-title;
  background: yellow;
  color: red;
}

.article-body {
  grid-area: article-body;
  background: magenta;
}

@media (max-width: 800px) {
  body {
    grid-template-areas:
        "article-title"
        "hero-image"
        "article-body";
}
<div class="hero-image">image</div>
<div class="article-title">title</div>
<div class="article-body">body</div>

推荐阅读