css - 为移动设备修复 "Position: Absolute"

Question

所以我使用百分比和 VW 字体大小制作了整个网站，使网站不会像放大和使窗口变大/变小那样发生变化。有几个部分我必须将图像叠加在一起，我通过使用“position:absolute”实现了这一点，这些部分是我的导航栏和我的 2 个“订阅我们的邮件列表”输入框。

该网站绝对完美，除了当您刚好接近移动设备的宽度时(我不知道，大概是 300 像素？)然后所有的定位都会变得不稳定。

这是我的导航栏 CSS:http://pastebin.com/raw/QpjPiN4Z

我想知道是否有某种方法可以在不影响网站其余部分的情况下以某种方式更改定位？或者以某种方式使用媒体查询来帮助修复它？我不知道该怎么做。每次我更改“位置:”类型时，它都会严重损坏。

Answer 1

如 Cesar 建议的那样，在您的 CSS 中使用媒体查询进行覆盖。指定要覆盖的像素。

@media (min-width: 1px) and (max-width: 300px) {
 // Do css overrides here
}

为您的覆盖操作最小/最大像素宽度，然后开始使用 CSS。如果您遇到不会覆盖的样式，请执行以下操作:

.container { height: 500px !important; }

!important 标志将覆盖那些似乎不想让您覆盖的东西。当你快要失去理智时，它可以派上用场。使用 chrome/firefox Inspect Element 来帮助你。