0

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

考虑那个模板。我可以更改浏览器窗口的大小、放大网页或使用手机查看网页。div、左侧内容div和右侧边栏 div 都会自动调整到宽度。在移动界面中，仅div显示内容，右侧边栏div位于内容之后div。

我希望我的问题很清楚。

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

4

4 回答 4

1

该模板基于 twitter 引导程序。

找到这个链接..

于 2013-09-14T15:15:39.270 回答
1

在您的 CSS 中找到 media max-width 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 }
}
于 2013-09-14T15:22:29.283 回答
0

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

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

#tabber {
    max-width: 330px;
}

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

于 2013-09-14T15:21:36.847 回答
0

好的，你看到的是两个不同的响应式概念。要真正理解其中任何一个，您需要知道这是两个完全不同的移动设计概念。

如果你放置一个宽度为 100% 的 div，那么该 div 将是屏幕宽度的 100%。如果你放 50% 的宽度，它总是屏幕的 50%。

但是，如果上面提到的 div 位于另一个宽度为... 1140px 的 div 内，那么 100% 的 div 会继承 1140 宽度，除非屏幕小于 div。然后 100% 的宽度会缩小到任何可用的宽度。

这是两种常见的宽度布局。960 可靠且较旧，1140 更现代。阅读 CSS 固定宽度布局。每个新人都会问我的专栏应该有多大以及为什么...

http://960.gs/

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

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

于 2013-09-14T15:40:14.507 回答