CSS Media Queries Overriding Each other - html

Question

Thanks Stack Overflow for helping. I've got some custom css I'm using to tighten up a design. I keep running into this issue where if I change something in one media query say for the iphone 6, that change then affects another device say the iphone 5. Its becoming this issue were I'm constantly adjusting with no end in sight. Here are my #media break points I'm using.
/* IPHONE 6 PLUS */
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : portrait) {
}
/* IPHONE 6 */
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) {
}
/* IPHONE 5s */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
}
/* IPAD LAYOUTS */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
}
/* 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) {
}
Any help would be greatly appricated.

Answer 1

I agree with Birdman, and you should consider a mobile first approach. Mobile first, however, means that the smallest device size is completely outside of any media query. The next size up will start the first media query. You only ever need a min-width, as these new styles will be in addition to the base styles, not overwriting them. Each media query created will continue to combine with those already called.
And instead of worrying about iPad this, or tablet that... worry about when your design elements start to look bad. All of the major browsers have intelligent enough emulators to test in different device sizes.
Here is a good article on the pros and cons. I always code mobile first, and never worry about styles colliding, unless I do it on purpose :)
https://codemyviews.com/blog/mobilefirst

Answer 2

When a device width falls between the media query's range, the styling will be applied. So if a device's width is 500px, it will first have the 6plus styling, which will then be overridden by the 6's styling, then the 5s'. Normally, it's not recommended to try to tailor your CSS for a specific device, but if you do want to, you'll need to make sure none of the ranges overlap, or they will just be overridden by whichever styling comes last.