如何使用媒体查询将手机与平板电脑的形象与平板电脑景观区分开来

Question

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

我在找..。

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。