更改屏幕尺寸时，我的网站混乱了

Question

我想让我的网站仅使用CSS响应我刚接触设计，请帮助我，如何使它仅使用CSS响应？

我尝试使用媒体查询，但是它对我不起作用，或者我不知道如何使用它。

我正在复制此网站：https://www.portfoliobox.net/

我知道上面的网站是使用引导程序制作的，但是我只使用html和css做。

检查我的屏幕尺寸更改时会弄乱。 https://portfolioboxcopy.000webhostapp.com/

告诉我是否有任何错误。谢谢！

Answer 1

有关如何改善网站并使其具有响应能力的一些技巧：

1. 避免内联样式，因为它们难以管理。将样式放在.css样式表中，并在HTML文档中的结束</head>标记之前的某个位置的链接标记中链接到样式表，如下所示： <link rel="stylesheet" href="styles.css" />

2. 要使站点具有响应性，应尽可能多地使用百分比宽度，并使用媒体查询来调整设计。媒体查询应作为单独的样式规则添加，例如：

.bg1 {
  margin: -10px -8px 0;
}

@media (max-width: 500px) {
  .bg1 {
    margin: 0;
  }
}

1. 避免在文件名中使用空格，例如图像“ bg（1）.jpg”，因为文件url中不允许使用空格。尝试使用“ bg_1.jpg”之类的方法。

2. 考虑将当前的“ header”元素移动到新的包装器元素中。这样可以更轻松地创建具有可设置高度的标头区域，该高度可以通过媒体查询进行更改。我建议删除您的“ bg1”元素，并在上述新包装器元素的background-image: url();中使用图像。