根据屏幕大小移动div

时间:2013-11-23 14:03:11

标签: jquery css wordpress html

我有一个包含3个div的网站用于布局目的。第一个是外容器(1410px宽),第二个是左列(1110px宽),最后一个是右列(300px宽)。

它是我想要修改的wordpress主题。最初是在左栏(当时是唯一的容器,出于其他目的,我添加了新的外容器和右栏)

当它是iPhone上的原创主题时,它会完美地扩展网站,这非常棒。由于修改了它失去了这种能力。

在一个理想的单词中,我想在移动设备上查看时将新的右侧div移动到导航栏下方的位置,并保持曾经存在的缩放。

wordpress主题被称为二重奏。

实现我想要的唯一其他方法是移动主题的侧边栏。如果有人能告诉我该怎么做,那么我想要实现的目标可能会更好

我正在尝试使用的网站是http://testbox1.martincwebd.com

2 个答案:

答案 0 :(得分:2)

我建议您使用媒体查询:

http://css-tricks.com/css-media-queries/

答案 1 :(得分:2)

这些教程/博客非常有用,易于阅读,理解和实施。

有关响应式设计的基本阅读

http://www.alistapart.com/article/responsive-web-design

进一步采用流体设计

http://www.alistapart.com/article/fluidgrids

非常好的响应式设计教程 - 直截了当

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

可以使用的漂亮的响应式设计技巧

http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design