how many media queries wil be perfect to target all devices?

  • Resolved johannes999

    (@johannes999)


    1 year, 9 months ago

    hello,

    I have problem with media queries .

    I used flex to build my website now I want to use the most advanced media querie which wil target all devices from iphone, samsung,ipad ,laptop and large desktop devices .

    I study the media query of bootstrap but I didn’t find it 100%.

    I looked in github and found this media query :


    as example I wrote the code for device ( 320px to 480px ) but when I go to inspect it in chrome I see that after 400px the appearance (place) of the letters in the box under slide show or page image are misvorming .

    /* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  
  /* CSS */
  
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  
  /* CSS */
  
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  
  /* CSS */
  
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  /* CSS */
  
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  
  /* CSS */
  
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  
  /* CSS */
  
}

    so I tried to write from 320 to 400px and then from 421 to 500px.

    but if I do this way it wil take 12 to 16 media queries .untill 4k resolution.

    my question is : what I have to do now ?

    do I have just to observe devices and ignore the rest of points like for example 420px or 1150px or 1400px .

    wil be 5-6 media queries enough to target all devices .

    I need some professional advice.

    thanks

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • I’m not going to claim this is right way; but, I find you should base your media queries on what the component your working on needs. If you have a complex testimonial block and it looks awkward, or crowded at 1200px I would define my breakpoint for that component at that size.

    I would also look into whether the component your working on needs a media query. You can also use techniques like the one found here.

    If you do want a set a breakpoint I’ve found breakpoints on Tailwind CSS to be useful.

    Thread Starter johannes999

    (@johannes999)

    thanks for your usefull tips

    I wil read and study tomorrow and let it know.

    Thread Starter johannes999

    (@johannes999)

    I have read all and decided to test first in browser and then write my media queries.

    thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘how many media queries wil be perfect to target all devices?’ is closed to new replies.