How does it work with the media screen?

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

Those are media queries, and they're not doing anything because they don't include any styles. What exactly are you trying to do? — zzzzBov, Jul 21 '17 at 02:53
@zzzzBov They include styles, I have retired for the code to fit here .. — , Jul 21 '17 at 03:21

score 0 · Accepted Answer · answered Jul 21 '17 at 08:16

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/

I use the Materialize Frameworks, and some things I have to adjust with the media queries. What are the media queries that I use to leave responsiveness at least 90% for all types of devices that access this site? Be them, Smartphones, Tablets, Ipads, Iphones, Desktops, Notebooks .. — , Jul 21 '17 at 13:37
Official documentation: https://drafts.csswg.org/mediaqueries-3/ Practical examples: https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile https://codepen.io/mlegg10/pen/JKdOaj — Marian07, Jul 21 '17 at 22:42

How does it work with the media screen?

1 Answers1