交互式 CSS 适用于所有类型的屏幕

Question

我正在努力使我的网站完全互动。

第一期： Logo img 没有像我想要的那样垂直对齐。

如果屏幕宽度 >1200，则距顶部（导航）的边距太大。看起来像这样:

如果屏幕宽度小于我想要的样子：

我尝试更改填充和边距，但对所有屏幕尺寸都没有结果。我认为这可能是个好主意:

    .homepage #logo {
        margin-top: -10%;
    }

但我认为这不是一个好的做法。

第二期：我有4个盒子。我让他们互动。感谢 Whosebug 用户，我什至让图像大小具有交互性。所以当屏幕宽度超过 736px 时，它看起来像这样：

但是如果少的话，图片真的很大:

这里的参考是 link : enter link description here 随时询问 CSS。干杯

Answer 1

你有一些 html errors

你有很多 css 错误 css validator errors

我会使用这些链接清理您的代码，然后保存并再次查看您的页面。您的 css 中似乎设置了网格系统。

Answer 2

首先，编辑您的 css sheet 以添加响应图像 css 我发布 about.Then 保存 this text document 我为 2 到 4 响应网格

在不同的位置使用 html 并将所有 css 复制到您的样式sheet。