CSS media queries get messed up

it's not some serious question, but i just want to share and get more information with CSS media queries.

i find my own CSS media queries very comfortable, but it still has too many flaw in it. Just as we all know that today mobile device is growing so fast, some of them has the same resolution for tablet or even for a laptop.

let's get 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 using bootstrap to make it type less,
main.css is for dekstop view, actually the best view just on my desktop resolution, which is 1920x1080p and below that is not perfect.
mobile.css is for device like phone and tablet, and i just get this for default mobile device and ipad resolution, android resolution get a little bit messed up because some of android resolution is rough and unidentify, and if the device media queries get away from 768px it will messed up,

laptop.css is for laptop view and sometimes its not working so good as i thought.

this is the css code for each media main.css is plain, mobile.css is like

/*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's a little bit tricky because some of the phone device is now has length with laptop resolution.
}

and 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) { 
  }

this is the link where i've got this media queries, not all of them that i picked. and i adding some of my media queries.

the most terrific from all of them is the absolute position and flying from 2 dives like the img below. in here it looks still good but its not perfect, but im afraid if the device is out of my resolution media queries it will be messed up.

so, as a web developer, what is your media queries? hope u can drop some answer and inspiration in here.

I saw that you are using multiple files for media queries. Try to combine them in one as media.css & it will solve half of your problems. Using media queries from multiple files causes conflict.