how to use media query to seperate phone vs tablet portrait vs tablet landscape

Question

I use sass for styling and I have a main sass file which has @imports of various different scss files conditionally included with media queries.

I am looking for ...

1. phone

2. all/most tablet (portrait), that behaves like the phone

3. all/most tablet (landscape)

here is my media query:

@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";
}

here's my result

1. I load the page on my landscaped tablet, and everything is fine
2. I rotate 90 deg, and it displays the portrait, which is also fine
3. I rotate back to landscape, and everything is still in portrait...,

I've debugged for hours, what am i doing wrong?

Answer 1

The issue was that instead of min-device-wdith, I should use min-width.

Answer 2

Try formatting your imports like this (instead of inside a media query):

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