css - 响应式 CSS 问题

Question

哇，我真的很挣扎。

我已经为很多网站创建了响应式主题，但我自己无法让它工作!

该站点的开发版本位于 Development Site样式表电话部分的 CSS 如下:

@media only screen and (max-width: 767px) {
* {
    float: none!important;
    width: 100%!important;
}
#container, #home-boxes, #header, #home-scroller, #main-nav, #main-footer, #content, #sidebar  {
    width: 100%!important;
    overflow:hidden;
    float: none;    
}
.wrapper {
    width: auto;
    margin: 0;
}
#header {
    width: auto;
}
#home-scroller h1 {
    font-size: 50px;
}
#home-scroller h1 span {
    font-size: 30px;
}
#home-scroller p.home-price {
    font-size: 30px;
}
#home-scroller a.button, #home-scroller a.buttonalt {
    display: block; 
}
#home-scroller p.bottom {
    position: inherit;  
}
ol.dots { display: none; }
#home-scroller li {
    width: 100%;
}
#main-nav {
    float:none;
}
#home-boxes-inner .home-box, .footer-box {
    float: none;
    width: 100%;
    margin-right: 0;
}
img {
    width: 100%;
    height: auto;
}
#logo {
    float: none;
}
}

如您所见，如果您在移动设备上访问该网站，它甚至离正确还差得很远。

有人对我应该看的地方有任何指示吗？

非常感谢!

Answer 1

硬编码的 html-width 与这个漂亮的元设置冲突:

html {
   min-width: 1060px; /* hard coded width for large screens */
}
@media only screen and (max-width: 767px) {
   /* new: fit viewport to small device screen */
   min-width: 100%
}