Question

http://demo.mythemeshop.com/ribbon/

考虑一下这个模板。我可以更改浏览器窗口的大小，放大网页或使用移动设备查看网页。 div，left content div和right sidebar divs都会自动调整宽度。在移动界面中，仅显示内容div，右侧边栏div位于内容div之后。

我希望我对自己的问题很清楚。

我想知道这是如何实现的？

Answer 1

该模板基于twitter bootstrap。

查找this链接..

Answer 2

在CSS中查找最大宽度为720px的媒体并替换为

@media screen and (max-width:720px) { 
.secondary-navigation a {
    padding-top: 10px!important;
    padding-bottom: 10px!important;
}
.article { width: 99.4% }
#content_box {
    padding-right: 0px;
    padding-left: 0px!important;
}
.sidebar.c-4-12 {
    width: 30%;
}
.f-widget { width: 44% }
.f-widget-2 { margin-right: 0 }
.ad-125 li { max-width: 45% }
.footer-widgets #s { width: 70% }
#comments { margin-right: 0 }
}

Answer 3

您的问题来自http://demo.mythemeshop.com/ribbon/wp-content/themes/ribbon/style.css：

.sidebar.c-4-12 {
    max-width: 300px;
}

#tabber {
    max-width: 330px;
}

删除这两者，侧边栏的宽度将与内容帖子的宽度相同。

Answer 4

好的，你看到的是两种不同的响应概念。要真正能够理解，你需要知道它是两个完全不同的移动设计概念。

如果你设置一个宽度为100％的div，那个div将是屏幕宽度的100％。如果放置50％宽度，则总是占屏幕的50％。

但是，如果上面提到的div是在另一个宽度为... 1140px的div内部，则100％的div继承1140宽度，除非屏幕小于div。然后100％的宽度会缩小到可用的宽度。

以下是两种常见的宽度布局。 960是可靠的和更老的，1140更现代。阅读CSS固定宽度布局。 每个新人都询问我的专栏应该是什么尺寸以及为什么......

http://960.gs/

所以我刚刚描述了一个响应式％布局。现在，我将简要解释一下上面描述的边栏消失在移动设备上并显示的效果。它们被称为媒体查询。你可以谷歌他们以获得良好的理解。如果屏幕尺寸不同，您可以更改样式表的某些部分。当屏幕较小时，媒体查询会更改float：right和css样式表中的宽度。

此网站非常适合学习媒体查询等...

如何调整两个div的宽度以匹配屏幕大小

4 个答案: