CSS Media Queries Confused

Question

This is not a serious matter, but I just want to share and get more information using CSS queries.

I find my own CSS queries are very convenient, but there are still too many drawbacks. Just as we all know that today a mobile device is growing so fast, some of them have the same resolution for a tablet or even for a laptop.

move on to the case

this is my order of my media queries in index.php

    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="style/bootstrap/css/bootstrap.min.css">
    <!-- custom -->
    <link rel="stylesheet" type="text/css" href="style/css/main.css">
    <link rel="stylesheet" type="text/css" href="style/css/laptop.css">
    <link rel="stylesheet" type="text/css" href="style/css/mobile.css">

• I use bootstrap to make it smaller
• main.cssto represent dextop, actually the best view is only on my desktop, which is 1920x1080plower, which is not perfect.
• mobile.css , , ipad, Android , , 768px, ,

• laptop.css , , .

  css main.css , mobile.css

  /*default*/
  @media screen and (max-width: 768px) {
    its like button, font, etc.
  }
  
  
  /*default Portrait*/
  @media screen and (max-width: 768px) and (orientation: portrait) {
   actually its working good on both kind of device IOS and Android.
  }
  
  
  /* iPad Portrait */
  @media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 1) {
  }
  
  
  /* iPad Landscape */
  @media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 1) {
  }
  
  
  /*default Landscape*/
  @media screen and (max-width: 768px) and (orientation: landscape) {
      this one it a little bit tricky because some of the phone device is now has length with laptop resolution.
  }
  

  laptop.css

  @media screen 
     and (min-device-width: 1024px) 
     and (max-device-width: 1280px) 
     and (-webkit-min-device-pixel-ratio: 1) { 
  i got this for an old laptop, like square laptop will do too.
     }
  
  /* ----------- Non-Retina Screens ----------- */
  @media screen 
    and (min-device-width: 1200px) 
    and (max-device-width: 1600px) 
    and (-webkit-min-device-pixel-ratio: 1) { 
    }
  
  /* ----------- Retina Screens ----------- */
  @media screen 
    and (min-device-width: 1200px) 
    and (max-device-width: 1600px) 
    and (-webkit-min-device-pixel-ratio: 2)
    and (min-resolution: 192dpi) { 
    }
  

-, , . -.

- 2 , img . , , , -, .

, -, -? , .

Answer 1

, -. media.css, . - .