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%
}

Answer 2

尝试从

更改元宽度标记

<meta wisth...

到

<meta width...

响应式CSS问题

2 个答案: