我想让我的网站仅使用CSS响应我刚接触设计,请帮助我,如何使它仅使用CSS响应?
我尝试使用媒体查询,但是它对我不起作用,或者我不知道如何使用它。
我正在复制此网站:https://www.portfoliobox.net/
我知道上面的网站是使用引导程序制作的,但是我只使用html和css做。
检查我的屏幕尺寸更改时会弄乱。 https://portfolioboxcopy.000webhostapp.com/
告诉我是否有任何错误。谢谢!
答案 0 :(得分:0)
有关如何改善网站并使其具有响应能力的一些技巧:
避免内联样式,因为它们难以管理。将样式放在.css样式表中,并在HTML文档中的结束</head>
标记之前的某个位置的链接标记中链接到样式表,如下所示:
<link rel="stylesheet" href="styles.css" />
要使站点具有响应性,应尽可能多地使用百分比宽度,并使用媒体查询来调整设计。媒体查询应作为单独的样式规则添加,例如:
.bg1 {
margin: -10px -8px 0;
}
@media (max-width: 500px) {
.bg1 {
margin: 0;
}
}
避免在文件名中使用空格,例如图像“ bg(1).jpg”,因为文件url中不允许使用空格。尝试使用“ bg_1.jpg”之类的方法。
考虑将当前的“ header”元素移动到新的包装器元素中。这样可以更轻松地创建具有可设置高度的标头区域,该高度可以通过媒体查询进行更改。我建议删除您的“ bg1”元素,并在上述新包装器元素的background-image: url();
中使用图像。