Html 做出响应性设计是否为时已晚

我一直在网站上工作，它在我的屏幕上看起来不错。然而，当我用其他分辨率检查我的设计时，屏幕上到处都是元素。我是web开发新手，所以我有一个坏习惯，就是用右上方的命令移动项目。我应该更改代码本身还是@media query可以帮助我解决这种情况？如果是这样，你能推荐一个好的教程吗？我将发布我的CSS的一小段，以便更清楚地说明我在处理什么

。侧栏{
位置：固定；
宽度：30%；
高度：100vh；
背景：312450；
字号：0.65em；
不透明度：0.8；
}
.集装箱{
浮动：右；/*是SITO PZDC BUNA KAZKODEL*/
}
.标志{
垫底：3em；
z指数：50；
宽度：300px；
高度：自动；
位置：绝对位置；
左：18%；
排名前10%；
}
img{
位置：相对位置；
宽度：自动；
浮动：左；
高度：40vh；
z指数：999；
填充：2em 20px；
}
.导航{
位置：相对位置；
利润率：0.15%；
最高：65%；
转化：translateY（-50%）；
字体大小：粗体；
动画：向上滑动1.1秒；
}
美国海军{
列表样式类型：无；/*KAD NEBUTU JOUODU TASKELIU*/
}
.导航项目{
颜色：rgba（#FFF，0.35）；
显示：块；
边框样式：实心；
边界半径：30px；
宽度：380px；
文本转换：大写；
边缘顶部：30px；
文本对齐：居中；
列表样式类型：无；
弯曲方向：立柱；
填充：1rem 2rem 1.15rem；
光标：指针；
动画：向上滑动1.1秒；
}
/*卡德远景酒店*/
.导航项目{
颜色：#fff；
文字装饰：无；
}
/*乌兹维杜斯佩利特橙斯帕尔瓦纳瓦尔巴*/
.导航项目：悬停{
颜色：#f98673；
}
/*图标病毒橙色teksto*/
.图标{
宽度：85px；
高度：自动；
左侧边缘：7em；
边缘底部：-20px；
位置：相对位置；
}
/*泰克斯塔斯公寓酒店*/
.行{
显示器：flex；
弯曲方向：行；
宽度：80%；
顶部：32em；
浮动：对；
位置：相对位置；
柱间距：8px；
}

是的，@media query将帮助您。 是的，您很可能需要更改代码

---

我的意思是，看，有无数种方法可以用CSS来解决问题，使它们看起来很好。这并不意味着他们中的任何人：

• 将是合理和适当的事情做
• 与调整html结构相比，您将花费更少的时间

我不会分析你的代码，因为我会完全理解它并准备好为你修复它

这个答案只是一条建议。很抱歉，看到您意识到“响应性”太晚了。我去过那里。这一切好的一面是，它可能会给你一个教训（就像它对我一样）不要再忘记它：）

---

祝你好运

响应式网页设计永远不会迟到。 我总是从桌面版开始

首先，您需要在css文件末尾创建一个媒体查询，如：

@media only screen and (max-width: 479px) {}

在这里，您可以覆盖其他css命令

然后，您可以将css命令复制到：

 @media only screen and (min-width: 480px) and (max-width: 719px) {}

在这里，您需要编辑和删除一些css命令

如果nessisary，您也可以仅为桌面版本添加媒体查询，这意味着您可以添加一些css命令，而无需覆盖移动或平板电脑：

@media only screen and (min-width: 1200px) {}