I'm creating a responsive design web page, and I want to ensure I do all the media queries correctly for different devices and orientations.
This post suggests try using min-width and min-height media queries. And set up different break points for different resolutions.
screen orientation for multiple tablets with fluid design
Although, I found this method with the orientation (see below). Should I use this approach or the one above? Should I use @media screen, or should I consider all vs screen?
@media screen and (min-width: 700px) and (orientation: landscape) { ... }
Screen orientation is an interesting one as it's not always something that's reported back by the device/browser, so it's less reliable to use than min-width/max-width.
The other thing is that unless you're trying to do a particularly funky thing when the device is in landscape, then just adjusting your design based on width breakpoints is usually enough to get your desired effect.
If you have a landscape device, then it's probably okay to let the design display as it would at portrait with the same horizontal space. That is to say, it wouldn't be an unexpected behaviour for the user.
As for media all vs screen, I usually just stick with screen, as should the user want to do something like print the page, I don't necessarily want my break points to interfere in that.
As with anything though, you should think about the most common use cases for your users and make your decisions based on that. If it's just a regular web app/page, then there is nothing wrong at all with using just screen and not worrying about orientation.