css - 如何使用媒体查询来区分手机与平板电脑纵向与平板电脑横向

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);