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

时间:2018-09-24 17:22:08

标签: html css responsive

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

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

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

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

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

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

1 个答案:

答案 0 :(得分:0)

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

  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();中使用图像。