Question

我使用Zurb Foundation 5作为我的项目，我使用默认的SASS构建命令编译样式表。我想知道，是否可以在移动横向模式和纵向模式下显示不同的布局，而无需使用“show-for-landscape / show-for-portrait”类？但只使用“small-x / medium-x / large-x”类？

<div class="row">
    <div class="columns small-6 medium-4 large-4">A</div>
    <div class="columns small-6 medium-8 large-8">B</div>
</div>

我的手机（三星音符2，分辨率= 720 x 1280像素）在查看上述示例时始终显示“小”样式（无论使用横向还是纵向模式）

仅供参考，我已添加

<meta name="viewport" content="width=device-width, initial-scale=1" />

已经在文件上

根据链接http://tech.bluesmoon.info/2011/01/device-width-and-how-not-to-hate-your.html，它表示width = device-width将始终返回设备纵向宽度，这是为什么zurb foundation 5总是给我“小”样式的原因？

Answer 1

这可以使用媒体查询来实现。

@media screen and (orientation:portrait) { … }
@media screen and (orientation:landscape) { … }

CSS media queries is it possible to detect portrait / landscape tablet mode?

Zurb Foundation 5 - 移动横向视图

1 个答案: