很难上手
很难上手
提问于 2021-12-26 19:21:19
新手试着学跳蚤。谷歌检查工具称，我正试图让所有设备都能对此做出响应，其中一些只是在其他设备上丢失的。在我看到的一个帖子上遵循了建议，它让我走到了这一步。附件是我的html和css。我尝试过不同的flex组合，但到目前为止，在我的笔记本电脑屏幕上没有运气。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="header">
<h1>Sci-Fi Blog</h1>
<h3>dedicated to the Star Trek series</h3>
<div class="menu">
<ul>
<li>About</li>
<li>Resources</li>
<li>Other Sci-Fi series</li>
</ul>
</div>
</div>
<div class="container1">
<div class="row1">
<div class="STtos">
<h2>Star Trek TOS</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSTPdHkIFqZgTABvQtjcCnKr6mbWNfKBVDRRw&usqp=CAU" alt = "Pic of space ship">
<p>Turpis egestas pretium aenean pharetra magna. Tristique risus nec feugiat in fermentum posuere urna. In nibh mauris cursus mattis molestie a. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam. Sed pulvinar proin gravida hendrerit lectus a. In dictum non consectetur a erat nam. </p><a href="#"> <button>Read More</button></a> <a href="#"><button>Comment</button></a>
</div> <!--div STtos-->
<div class="STTNG">
<h2>Star Trek TNG</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQueIPqKDTgGH9_SaYzT7u9cfpvKs2P48l5dg&usqp=CAU" alt="pic of space ship">
<p>Mauris ultrices eros in cursus. At imperdiet dui accumsan sit amet nulla facilisi. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget magna fermentum iaculis eu non. Faucibus vitae aliquet nec ullamcorper. Convallis aenean et tortor at risus viverra adipiscing at in. Fermentum dui faucibus in ornare quam viverra orci. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. </p><a href="#"><button>Read More</button></a> <a href="#"><button>Comment</button></a>
</div> <!--end of STTNG-->
<div class="DS9">
<h2>Deep Space Nine</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKvwoJTvGIl2Nq2RzDKkf7OrgfVoHwrXP82A&usqp=CAU" alt="pic">
<p>Mauris ultrices eros in cursus. At imperdiet dui accumsan sit amet nulla facilisi. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget magna fermentum iaculis eu non. Faucibus vitae aliquet nec ullamcorper. Convallis aenean et tortor at risus viverra adipiscing at in. Fermentum dui faucibus in ornare quam viverra orci. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. </p><a href="#"><button>Read More</button></a> <a href="#"><button>Comment</button></a>
</div> <!--DS9 -->
</div> <!--row1 -->
</div> <!--container1-->
<div class="container2">
<div class="row2">
<div class="StarTrekTAS">
<h2>Star Trek TAS</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwdlJfrFrcj7KJRdTADDtsfjGa0SQweeu0fQ&usqp=CAU" width="259" height="194" alt="pic">
<p>Mauris ultrices eros in cursus. At imperdiet dui accumsan sit amet nulla facilisi. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget magna fermentum iaculis eu non. Faucibus vitae aliquet nec ullamcorper. Convallis aenean et tortor at risus viverra adipiscing at in. Fermentum dui faucibus in ornare quam viverra orci. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. </p><a href="#"><button>Read More</button></a> <a href="#"><button>Comment</button></a>
</div> <!--end of TAS-->
<div class="voyager">
<h2>Voyager</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRiV6QTXDR7lD9uvx8S-IuTClS-CV6COgSh1g&usqp=CAU" width="259" height="194" alt="pic">
<p>Mauris ultrices eros in cursus. At imperdiet dui accumsan sit amet nulla facilisi. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget magna fermentum iaculis eu non. Faucibus vitae aliquet nec ullamcorper. Convallis aenean et tortor at risus viverra adipiscing at in. Fermentum dui faucibus in ornare quam viverra orci. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. </p><a href="#"><button>Read More</button></a> <a href="#"><button>Comment</button></a>
</div> <!--end of Voyager-->
<div class="Enterprise">
<h2>Enterprise</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTa4Iz2D0_InBOZg4Wi_PWAT-1lEqxI0AExPg&usqp=CAU" width="259" height="194" alt="pic">
<p>Turpis egestas pretium aenean pharetra magna. Tristique risus nec feugiat in fermentum posuere urna. In nibh mauris cursus mattis molestie a. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam. Sed pulvinar proin gravida hendrerit lectus a. In dictum non consectetur a erat nam. </p><a href="#"><button>Read More</button></a> <a href="#"><button>Comment</button></a>
</div>
</div> <!--end of row2-->
</div> <!--end of container2-->
</body>
</html>
body {
margin: 0;
padding:0;
box-sizing:border-box;
}
.header {
background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQSzBDemswC2Gg3mbDR7t8mQ53jByPChDtA5w&usqp=CAU');
text-align:center;
background-size:no repeat;
background-size:cover;
height:310px;
color:white;
margin-bottom: 150px;
margin-left: 5px;
margin-right:5px;
}
.header h1 {
margin:0;
}
li {
list-style-type:none;
display:inline-block;
padding: 10px;
}
.menu ul {
text-align:center;
display:inline-block;
padding: 0px;
background: rgba(197, 228, 183, 0.8);
}
.menu {
display: inline-block;
margin-left: 10px;
}
p a {
display:inline;
}
@media screen and (min-width:640px) {
.row1 {
display:flex;
justify-content:space-evenly;
grid-gap:10px;
}
.STtos {
flex: 0;
}
.STTNG {
flex:0;
}
.DS9 {
flex:0;
}
.row2 {
display:flex;
justify-content:space-evenly;
grid-gap:10px;
}
.StarTrekTAS {
flex: 0 0;
}
.voyager {
flex:0 0;
}
.Enterprise {
flex:0 0;
}
}回答 2
Stack Overflow用户
发布于 2021-12-26 20:45:16
我们经常谈论一些响应性的东西，就好像它是一个二进制条件(好像是或者不是)，但是你的站点确实有很多方法可以使自己适应不同的屏幕分辨率或设备类别。
目前，如果我们忽略您的标题/菜单(这似乎与问题无关)，您的站点包含6块类似类型的内容。您已经将这些内容封装在包含每个.row3的2个lens服务器中，我怀疑这是一个错误(稍后将详细介绍)，但是如果您通过笔记本浏览器的镜头查看站点，这是有意义的。
当站点与所有三个项目并排显示时，它在全尺寸台式机(我猜包括您的笔记本电脑)上看起来很棒，因为你的CSS中的@media { ... }块是有效的。该块中的样式启用了flexbox，并使其看起来可能或多或少地像您所想的那样。但是，当您缩小站点时，在(仅) @media { ... }块的断点之后，该块中的所有样式都会被停用，浏览器会退回到将它们呈现为--如果您根本没有CSS的话。现在，对于手机来说，这种默认的风格其实并不是太糟糕，但这并不是大多数设计师(包括你)可能想要的。
可能希望的结果(我怀疑)是，你的网站看起来有点像它在桌面上现在(2行3列)，但一旦屏幕变小，它应该反应变成一个2列，最后是1列布局。
主要的问题在于CSS，而不是将所有样式都放在一个@media { ... }块中，然后像灯开关那样将其打开/关闭，而是希望大多数样式都是通用的，然后在@media { ... }块中针对不同的情况拥有最小数量的特定样式。
让我们先删除大多数问题，然后重新创建它们；让我们删除下面一行，以及CSS中的：
@media screen and (min-width:640px) {接下来，我们将查看HTML。虽然不是完全错误，但4个名称container1、container2、row1和row2作为class名称并不十分有用。id用于唯一的命名事物，类用于标记类似于其他东西的东西。后一种情况是我们此刻最重要的事情。
让我们将两个容器类更改为container，将2行更改为row (例如:删除数字)。接下来，6 startrek <div>s都具有独特的类名(如class="STtos")，将这6更改为ids (如id="STtos")，并将所有6 <div>s分配为共享类class="contentitem" (因此它们现在看起来类似于：<div id="STtos" class="contentitem">)。
现在，HTML中还有一个问题，但是我们稍后会回到这个问题，让我们现在重新创建一些CSS。
我们希望.rows是柔性盒(包含.contentitems)：
.row {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
}然后，为了简单起见，现在让我们将6.contentitem本身定义为需要200个像素的宽度，当有足够的空间(第一个0)时，不允许它们增长，如果空间很小(第二个0)，也不允许它们缩小：
.contentitem {
flex: 0 0 200px;
}现在，在你的笔记本电脑上进行测试，这应该与之前的3列完全相同。现在缩小屏幕太低宽度的->，它将wrap只有1列。现在，缩小一些，使其wrap为2列。
在这里，您将看到我之前忽略的最后一个问题的影响。您已经将内容包装到2个.row中，因为在创建内容时，您同时想到了3个条目。在这种情况下，根本没有理由有多个.row。
在HTML源代码中，就在<div class="contentitem" id="StarTrekTAS">的上方，让我们删除以下4行：
</div>
</div>
<div class="container">
<div class="row">现在，您的内容可以动态地完全调整屏幕大小，如果屏幕足够宽，您甚至可以同时获得全部6(或5，4，或.)。另外，如果没有手动的.row拆分，那么当你缩小到两列并排的正确宽度时，它实际上是3行2，而不是4行，其中2列是半空的。
所有这些更改之后的整个过程(以及CSS为我自己移动到<style>中)：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/* untouched css */
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQSzBDemswC2Gg3mbDR7t8mQ53jByPChDtA5w&usqp=CAU');
text-align: center;
background-size: no repeat;
background-size: cover;
height: 310px;
color: white;
margin-bottom: 150px;
margin-left: 5px;
margin-right: 5px;
}
.header h1 {
margin: 0;
}
li {
list-style-type: none;
display: inline-block;
padding: 10px;
}
.menu ul {
text-align: center;
display: inline-block;
padding: 0px;
background: rgba(197, 228, 183, 0.8);
}
.menu {
display: inline-block;
margin-left: 10px;
}
p a {
display: inline;
}
/* the css under here is changed */
.row {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
}
.contentitem {
flex: 0 0 200px;
}
</style>
</head>
<body>
<div class="header">
<h1>Sci-Fi Blog</h1>
<h3>dedicated to the Star Trek series</h3>
<div class="menu">
<ul>
<li>About</li>
<li>Resources</li>
<li>Other Sci-Fi series</li>
</ul>
</div>
</div>
<div class="container">
<div class="row">
<div class="contentitem" id="STtos">
<h2>Star Trek TOS</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSTPdHkIFqZgTABvQtjcCnKr6mbWNfKBVDRRw&usqp=CAU"
alt="Pic of space ship">
<p>Turpis egestas pretium aenean pharetra magna. Tristique risus nec feugiat in fermentum posuere urna.
In nibh mauris cursus mattis molestie a. Venenatis urna cursus eget nunc scelerisque viverra mauris
in aliquam. Sed pulvinar proin gravida hendrerit lectus a. In dictum non consectetur a erat nam.
</p>
<a href="#"> <button>Read More</button></a>
<a href="#"><button>Comment</button></a>
</div>
<!--div STtos-->
<div class="contentitem" id="STTNG">
<h2>Star Trek TNG</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQueIPqKDTgGH9_SaYzT7u9cfpvKs2P48l5dg&usqp=CAU"
alt="pic of space ship">
<p>Mauris ultrices eros in cursus. At imperdiet dui accumsan sit amet nulla facilisi. Pellentesque eu
tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget magna fermentum iaculis
eu non. Faucibus vitae aliquet nec ullamcorper. Convallis aenean et tortor at risus viverra
adipiscing at in. Fermentum dui faucibus in ornare quam viverra orci. Sagittis id consectetur purus
ut faucibus pulvinar elementum integer. </p>
<a href="#"><button>Read More</button></a>
<a href="#"><button>Comment</button></a>
</div>
<!--end of STTNG-->
<div class="contentitem" id="DS9">
<h2>Deep Space Nine</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKvwoJTvGIl2Nq2RzDKkf7OrgfVoHwrXP82A&usqp=CAU"
alt="pic">
<p>Mauris ultrices eros in cursus. At imperdiet dui accumsan sit amet nulla facilisi. Pellentesque eu
tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget magna fermentum iaculis
eu non. Faucibus vitae aliquet nec ullamcorper. Convallis aenean et tortor at risus viverra
adipiscing at in. Fermentum dui faucibus in ornare quam viverra orci. Sagittis id consectetur purus
ut faucibus pulvinar elementum integer. </p>
<a href="#"><button>Read More</button></a>
<a href="#"><button>Comment</button></a>
</div>
<!--DS9 -->
<div class="contentitem" id="StarTrekTAS">
<h2>Star Trek TAS</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwdlJfrFrcj7KJRdTADDtsfjGa0SQweeu0fQ&usqp=CAU"
width="259" height="194" alt="pic">
<p>Mauris ultrices eros in cursus. At imperdiet dui accumsan sit amet nulla facilisi. Pellentesque eu
tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget magna fermentum iaculis
eu non. Faucibus vitae aliquet nec ullamcorper. Convallis aenean et tortor at risus viverra
adipiscing at in. Fermentum dui faucibus in ornare quam viverra orci. Sagittis id consectetur purus
ut faucibus pulvinar elementum integer. </p>
<a href="#"><button>Read More</button></a>
<a href="#"><button>Comment</button></a>
</div>
<!--end of TAS-->
<div class="contentitem" id="voyager">
<h2>Voyager</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRiV6QTXDR7lD9uvx8S-IuTClS-CV6COgSh1g&usqp=CAU"
width="259" height="194" alt="pic">
<p>Mauris ultrices eros in cursus. At imperdiet dui accumsan sit amet nulla facilisi. Pellentesque eu
tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget magna fermentum iaculis
eu non. Faucibus vitae aliquet nec ullamcorper. Convallis aenean et tortor at risus viverra
adipiscing at in. Fermentum dui faucibus in ornare quam viverra orci. Sagittis id consectetur purus
ut faucibus pulvinar elementum integer. </p>
<a href="#"><button>Read More</button></a>
<a href="#"><button>Comment</button></a>
</div>
<!--end of Voyager-->
<div class="contentitem" id="Enterprise">
<h2>Enterprise</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTa4Iz2D0_InBOZg4Wi_PWAT-1lEqxI0AExPg&usqp=CAU"
width="259" height="194" alt="pic">
<p>Turpis egestas pretium aenean pharetra magna. Tristique risus nec feugiat in fermentum posuere urna.
In nibh mauris cursus mattis molestie a. Venenatis urna cursus eget nunc scelerisque viverra mauris
in aliquam. Sed pulvinar proin gravida hendrerit lectus a. In dictum non consectetur a erat nam.
</p>
<a href="#"><button>Read More</button></a>
<a href="#"><button>Comment</button></a>
</div>
<!--end of Enterprise-->
</div>
</div>
</body>
</html>现在，如果您实际上想要返回媒体查询，以便在不同分辨率之间进行其他更显式的更改，那么您可以(例如)将其添加到您的CSS中，在下面添加以下的所有其他样式：
@media screen {
/* (S) what you write in here, applies to any resolution (Small, Medium and Large) */
}
@media screen and (min-width:590px) {
/* (M) what you write in here, only applies to 590px or wider (Medium and Large screens) */
}
@media screen and (min-width:1000px) {
/* (L) applies to 1000px or wider (Large screens only) */
}这里有两件事要注意：
- 我基本上选择了3种不同的屏幕大小(小/中/大)，它们之间的断点是590 to和1000 to(这只是任意的示例数字)。
- 这三个不同的
@media块是，而不是特定于中小型/大型的，每个块都会影响其较大的变体。因此，可能应该将3个@media块标记为SML、ML和L块。
如果您想将一些背景颜色更改为黄色，只用于最小的屏幕(S)，那么您可以：
- 将
background-color: yellow;放在S块中 - 将
background-color: white;放在M块中，以防止M和L大小的屏幕受到黄色的影响。
或者更具体地针对您的站点，如果您希望并排显示超过3个内容，可以将其添加到大型(L)块中：
.contentitem {
flex-basis: 30%;
}这将覆盖我们在前面(在flex属性中)用30%定义的30%。
Stack Overflow用户
发布于 2021-12-26 20:25:02
如果您想使您的div响应，即在行方向时，在pc上，在列上移动。首先，必须将display: flex定义为父div，以便将其中的所有div按行顺序排列，而在@media查询中，只需再添加一个属性flex-direction: column，这将将flex-direction的默认值row更改为column。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70489219
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号