这是背景徽标。 GTA 的 3 张标题图片在 768px 宽度下无法排成一列，媒体查询将它们设置为只有一列的网格。我以前这样做成功过，但在这里却行不通。
.body {
margin-top:0pt；
margin-left:0pt；
margin-right:0pt；
margin-bottom:0pt；
}
.gta {
background-image: url('logos/GTA3_Artwork.jpg')；
background-position:center；
}
.item {
font-family: "Freeman", sans-serif；
font-weight: 800；
font-size: 2rem；
color: rgb(2, 1, 0)；
margin-top: 30px；
}
.gta3 {
position: relative；
left: 600px；
top:200px；
color:rgb(0, 0, 0)；
font-family: 'Pricedown Bl', sans-serif；
font-size:60px；
text-shadow: 20px；
宽度：200px；
display:block；
}
.gtavicecity {
position: relative；
left: 110px；
top：-70px；
color: rgb(221, 71, 221)；
font-family: 'Rage Italic', sans-serif；
font-size: 90px；
宽度：200px；
display: block；
}
.gtasanandreas {
position:relative；
left: 1000px；
bottom:300px；
font-family: 'Beckett', sans-serif；
font-size: 80px；
颜色：黑色
宽度：200px；
display:block；
}
.alsoflexbox {
display: flex；
justify-content:space-evenly；
font-family: "Freeman", sans-serif；
font-weight: 800；
font-size: 32px；
margin-bottom：100px；
背景颜色：灰色；
border-radius：30px；
flex-wrap:wrap；
}
.kezdo {
font-family: "Freeman", sans-serif；
font-weight: 800；
font-size: 2rem；
display: block；
text-decoration: none；
color: black；
text-align: center；
margin-bottom：50px；
}
@media (max-width: 768px)
{
.container{
display:grid；
grid-template-columns：100%;
grid-template-rows: auto;}
.item {
font-family: "Freeman", sans-serif；
font-weight: 800；
font-size: 2rem；
color: rgb(2, 1, 0)；
margin-top: 30px；
}
}
.gta3 {
color:rgb(0, 0, 0)；
font-family: 'Pricedown Bl', sans-serif；
font-size:60px；
text-shadow: 20px；
width: 200px；
}
.gtavicecity {
color: rgb(221, 71, 221)；
font-family: 'Rage Italic', sans-serif；
font-size: 90px；
width: 200px；
}
.gtasanandreas {
font-family: 'Beckett', sans-serif；
font-size: 80px；
color:black；
width: 200px；
}
.gta {
background-image: url('logos/GTA3_Artwork.jpg')；
background-position:center；
}
<body class="gta" >；
<div class="container">；
<div class="item"><a class=" gta3" href="https://www.gta.fandom.com" style="text-decoration:none;">Grand Theft Auto III</a></div>；
<div class="item"><a class="gtavicecity" href="https://www.gta.fandom.com" style="text-decoration:none;">Vice City</a></div>；
<div class="item"><a class="gtasanandreas" href="https://www.gta.fandom.com" style="text-decoration:none;">San Andreas</a></div>；
</div>；
<div class="alsoflexbox">；
<a style="text-decoration: none;color:black" href="zene.html"><div>Zene</div></a>；
<a style="text-decoration: none;color:black" href="gta.html"><div>GTA</div></a>；
<a style="text-decoration: none;color:black"href="gitár.html"><div>Gitár</div></a>；
<a style="text-decoration: none;color:black"href="számítógép.html"><div>Számítógép</div></a>；
<a style="text-decoration: none;color:black"href="fotózás.html"<div>Fotózás</div></a>；
<a style="text-decoration: none;color:black"href="utazas.html"><div>Utazásaim</div></a>；
<a style="text-decoration: none;color:black"href="sport.html"><div>Sport</div></a>；
<a style="text-decoration: none;color:black"href="kepesiteseim.html"><div>Képesítéseim</div></a>；
<a style="text-decoration: none;color:black"href="valami.html"><div>Valami</div></a>；
</div>；
<div class="kezdo"> <a style="text-decoration: none;color:black" href="index.html">Kezdőoldal</a>；
</div>；
</body>；
</html>；
我使用了媒体查询，可能还有许多无用的代码行。我不知道为什么当我缩小屏幕尺寸时，我的 3 个徽标会变成一列。我可以使用网格成功地使我的其他页面移动到一列，但不知道为什么在这里不起作用。
问题在于你的媒体查询只对
.container
元素应用了网格布局，而没有对其中的子元素（
.item
）进行任何布局调整。
为了解决这个问题，你需要在媒体查询中也对
.item
元素应用样式，将它们排列成一列。你可以通过将
.item
的宽度设置为
100%
来实现。
以下是如何修改你的代码：
@media (max-width: 768px) {
.container {
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto;
}
.item {
font-family: "Freeman", sans-serif;
font-weight: 800;
font-size: 2rem;
color: rgb(2, 1, 0);
margin-top: 30px;
/* 将 .item 的宽度设置为 100% */
width: 100%;
}
}
此外，你的 CSS 代码中还有一些其他问题：
-
重复的样式
: 你在媒体查询内外都定义了
.gta3、.gtavicecity和.gtasanandreas的样式。最好将这些样式合并到一个地方，以避免重复和混乱。 -
不必要的定位
: 你使用了大量的
position: relative和left、top属性来定位元素。这可能会导致布局问题，并且难以维护。建议使用更灵活的布局方法，例如 Flexbox 或 Grid。 - 内联样式 : 尽量避免在 HTML 中使用内联样式，而是将所有样式都放在 CSS 文件中。
建议你重新组织你的 CSS 代码，并使用更现代的布局方法来简化你的代码并提高可维护性。
标签：css,mobile,grid From： 78584449