How does it work with the media screen? - css

Question

I have the following media screens:
/*
768px - 1280px
WXGA - (Windows Phone com DPI alta)
*/
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1280px)
and (orientation: portrait){}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1280px)
and (orientation: landscape){}
/*
1024px - 768px
XGA - (Ipad)
*/
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait){}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape){}
/*
1366px - 768px
WXGA - (Ultrabook)
*/
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1366px)
and (orientation: portrait){}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1366px)
and (orientation: landscape){}
However, there are three (3) rearrangements that have the same pixel,
So he is entering the first 768px without being able to modify it for others.
I would like to know how I do to fix this, since I have (3) resolutions that are as follows:
768x1280
1024x768
1366x768

Answer 1

I assume you don't just want to use this for just few lines of code, but rather for a medium sized/big project.
Your approach is too robust and hard coded. You don't necessary need to be this specific for every device and screen size. This would mean a lot of repeated code.
On your design implementation, focus on the combination between relative + and fixed sizes for elements. (check some well coded responsive template examples)
Then, use #media queries to watch general screen sizes and apply specific changes for these.
A example would be:
/*
768px - 1024px
XGA - (Ipad)
AND
768px - 1280px
WXGA - (Windows Phone com DPI alta)
*/
#media only screen
and (min-width: 768px)
and (max-width: 1280px) {
}
/*
WXGA - (Ultrabook)
768px - 1366px
*/
#media only screen
and (min-width: 1281px)
and (max-width: 1680px) {
}
NOTE: I have replaced device-width(deprecated and often unnecessary) with width.
If you want to check a comparison between them: https://www.sitepoint.com/media-queries-width-vs-device-width/