如何使用媒体查询分离手机与平板电脑肖像与平板电脑的景观

Question

我使用sass进行样式化，我有一个主sass文件，其中包含各种不同scss文件的@imports 媒体查询有条件地包含。

我正在寻找......

1. 电话

2. 所有/大多数平板电脑（人像），其行为类似于手机

3. 全部/大部分平板电脑（风景）

这是我的媒体查询：

@import "global";
@media only screen and (min-width: 320px){
    @import "styleguide";
    @import "phone";
}

@media only screen and (min-device-width: 768px)
and (orientation: portrait){

}
@media only screen and (min-device-width: 768px)
and (orientation: landscape){

    @import "tablet-styleguide";
    @import "tablet";
}

这是我的结果

1. 我在我的景观平板电脑上加载页面，一切都很好
2. 我旋转了90度，它显示了肖像，这也很好
3. 我旋转回景观，一切仍然是肖像......，

我已经调试了几个小时，我做错了什么？

Answer 1

尝试像这样格式化导入（而不是在媒体查询中）：

@import url(foo.css) screen and (min-width:320px);
@import url(bar.css) screen and (min-device-width:768px) and (orientation:portrait);
@import url(blah.css) screen and (min-device-width:768px) and (orientation:landscape);

Answer 2

问题在于，我应该使用min-device-wdith而不是min-width。