CSS、Flexbox和responsive -非常经典的文章布局--可以不使用JS或DOM吗？
CSS、Flexbox和responsive -非常经典的文章布局--可以不使用JS或DOM吗？
提问于 2020-05-28 02:33:02
这就是我的目标：
这是code I tried。它是桌面版的第一个版本，可以正常工作。但不是移动端，我被告知要先编写移动端代码。如果可能的话，我想在没有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开始，图片就完全在底部了。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-28 03:17:07
这是CSS Grid的一个很好的用例。CSS-Tricks网站有一个网格的nice cheat-sheet。该功能由all major browsers支持。
其思想是您将定义body (或容器div)以网格的形式显示，并(通过grid-template-areas)命名网格区域。区域对应于图像、标题和正文。
然后，在您的媒体查询中，您可以重新映射网格布局。
我已经将我的媒体查询设置为以800px触发，这样当您运行下面的堆栈代码片段时，您应该会看到移动视图。如果你点击代码片段上的“全屏”，你会看到桌面视图。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62050386
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号