Html 如何调整“我的盒子”模型上的边距以适应移动屏幕？

我对html非常陌生，在使用box模型时也不是很有经验。在桌面上，我的网站看起来像我想要的那样，但在移动设备上，它看起来不太好。有人能帮我吗？谢谢

这是我的网页，乱七八糟：

这是我的密码：

<style>

a {
  display: block;
  background-color: #dddddd;
  color: DarkOrchid;
  width: 200px;
}
h1 {
  background-color: #000;
  width: 230px;
  margin-left: auto;
  margin-right: auto;
}
div {
  background-color: #330033;
  width: 1000px;
  border: 2px solid #32174D;
  padding: 5px;
  margin: 20px;
  margin-left: auto;
margin-right: auto;
</style>

a{
显示：块；
背景色：#dddddd；
颜色：暗红色；
宽度：200px；
}
h1{
背景色：#000；
宽度：230px；
左边距：自动；
右边距：自动；
}
div{
背景色：#330033；
宽度：1000px；
边框：2个实心#32174D；
填充物：5px；
利润率：20px；
左边距：自动；
右边距：自动；

---

谢谢，对不起，如果这个问题已经被问到了，我找不到一个明确的答案：p.

你可以使用@media查询{//everything inside in here}或@container查询{//everything inside in here}。我建议你看一些教程或课程，尽管你可以使用媒体查询，请参见下面的示例

@media (max-width: 667px) {
  div {
     // put whatever style you want
  }
}

@media (min-width: 667px) and (min-width: 400px) {
  div {
     // put whatever style you want
  }
}

我以667px为例，这意味着当窗口从667px开始，小于667px时，执行以下样式

如果要在不同的屏幕大小之间放置样式，可以按照以下示例进行操作

@media (max-width: 667px) {
  div {
     // put whatever style you want
  }
}

@media (min-width: 667px) and (min-width: 400px) {
  div {
     // put whatever style you want
  }
}

看到了吗？这很有帮助

从这里开始：我从开始，然后使用。