CSS响应式布局方法

声明：我不是设计师。我不太了解响应式CSS方法。轻松点我！我是一位正在尝试创建收养版式的开发人员。CSS响应式布局方法

我使用Twitter的引导3，这是我需要在人像模式中的布局：

Portrait mode image

这里是它应该在风景模式改变为：

enter image description here

这里是“布局算法”我在我的脑海：

如果屏幕的宽度比768px更高，使用横向版式，（在横向模式适用于电话和片剂）的屏幕分成2
否则，如果高度大于400，使用肖像布局挤压一切，以适应。
否则，显示横向模式，但只显示图形，用一个按钮显示具有相同选项的叠加层。（不包括在上面的截图。）

现在我的问题：单独使用CSS

才能做到这一点？如果是这样，怎么样？（肖像模式中的按钮在图表上方和下方移动，并在横向上均匀分布。）
否则，使用最小化javascript来实现此响应式布局的最佳方法是什么？

来源

2014-01-07 Lakshman Prasad

这可以使用CSS媒体查询完成 - 这些允许您定义基于不同布局测量的不同CSS块。这个主题有很多教程。 –

它在Bootstrap资源网站[[1]（http://getbootstrap.com/css/）]上也有很好的记录。 – Xareyo

Boostrap在0-767px之间没有断点，所以Bootstrap无法使用这个功能，你需要添加这里讨论的css：https：//github.com/twbs/bootstrap/issues/10203并且还使用一些jQuery来克隆图表的位置，因为它出现在“In Country”按钮行之后 – Christina

演示http://www.bootply.com/104401

创建纵向和横向之间的断点CSS媒体查询（例如这480像素的iPhone）。这可以用来饼图拉向右：

@media (min-width: 480px) { 
    .push{float:right;} 
}

然后另一个查询告诉引导堆叠在肖像中的列：

@media (max-width: 480px) { 
    .breakpoint{width:100%;} 
}

使用push并相应breakpoint类如图所示Bootply。

来源

2014-01-08 14:12:20 ZimSystem

glyphicon-heart glyphicon-heart glyphicon-heart :)谢谢！ –

是的，您可以使用CSS3媒体查询。分别检查设备宽度和设备高度。

来源

2014-01-07 16:51:44 LorDex

CSS响应式布局方法

回答

相关问题