修复移动端的位置:绝对

Question

所以我做了一个完整的网站，使用百分比和大众字体大小，使网站不会改变，如放大和使窗口变大/变小。有几个部分我必须将图像叠加在彼此的上面，我通过使用“位置:绝对”来实现这一点，这些部分是我的导航栏，以及我的2个“订阅我们的邮件列表”输入框。

这个网站运行得非常完美，除了当你达到移动设备的宽度时(我不知道，也许像300像素？)然后所有的定位都会摇摇欲坠。

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

我想知道是否有某种方法可以改变定位，而不会影响网站的其余部分？或者也许可以使用媒体查询来帮助修复它？我不知道该怎么办。每次我更改"Position:“类型时，它都会中断，非常糟糕。

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元素可以帮助你完成这一过程。