Re: @import ipad only landscape mquery conflicting with desktop mquery

[drotar]

fixed it. secret is that you need to resize the desktop 1 pixel larger(1025) then the min iPad (1024) than place each query in the correct order. correct code attached below:

/* phone-landscape */
@import url(“phone-landscape.css”) only screen and (min-width:321px) and (max-width:480px);

/* tablet – portrait */
@import url(“tablet.css”) only screen and (min-width:481px);

/*

---

iPad Only landscape

---

*/
@import url(‘tablet-landscape.css’) only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape);
/*

---

iPad landscape Retina Device Only

---

*/
@import url(‘tablet-landscape.css’) only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-max-device-pixel-ratio: 2)and (min-device-pixel-ratio : 2) and (max–moz-device-pixel-ratio: 2) ;
/*

---

iPad landscape Non Retina Device Only

---

*/
@import url(‘tablet-landscape.css’) only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-max-device-pixel-ratio: 1)and (min-device-pixel-ratio : 1) and (max–moz-device-pixel-ratio: 1) ;

@import url(‘tablet-landscape.css’) screen and (orientation:landscape) and (min-width: 1024px);

/* desktop */
@import url(“desktop.css”) only screen and (min-width:1025px);

/* phone-portrait */
@import url(“phone-portrait.css”) only screen and (max-width:320px);

/* hi-res */
@import url(“hi-res.css”) only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2);