响应式布局并不完全符合我的要求

Question

我一直试图在一周之前留下一个响应式布局，这与我找到的网站非常相似，但我根本无法做到。我正在发送我看到的响应式网站的图像，我发送的图像是我的。

我想做的网站是这样的：

http://mapa.buenosaires.gob.ar

我想要做的网站是git，你可以进行克隆，下载，分享，无论你想要什么：

https://github.com/eltonsantos/snippets_uteis/tree/master/sidebar_bootstrap

网站的正常部分，全屏和大我能够完全按照我的意愿完成，但响应的部分我没有得到，一切都被打破，扭曲和在错误的地方。拜托，任何人都可以帮助我吗？

即使我使用媒体查询，我也不能完全保留它，因为它在网站上，我至少会理解为什么。有人能帮我吗？

Answer 1

CSS从上到下读取，这意味着对移动版本上的元素所做的更改，如果读取了桌面css属性，则可能会获得新样式。所以你要做的就是重置css代码。

举个例子，

// This is mobile CSS
.btn {
    color: red;
} 

@media screen and (max-width: 500px) {
    // this is desktop CSS
    .btn {
        color: blue;
    }
}

如果我们要离开没有颜色的桌面CSS btn，它会自动变成红色。但现在我们覆盖它。