Making #media queries more specific and more focused - css

Question

Hello: I am trying to have my CSS (wordpress) change on different devices (responsive). I am using #media queries in my child theme css file. But I am finding that my queries are "overlapping" for iPad and iPhone.
here is what I am using for iPad:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and here is what I am using for iPhone:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
I have found that on my iPhone - it is using both of the styles within both the queries…
I also have a plugin I use called "mobile" which allows me to use "is_mobile" and "is_tablet" etc which are very helpful…
so what I am trying to do is ensure that my CSS only applies on a mobile phone, or only applies on a tablet, and it seems these media queries are not as reliable as I thought…
the mobile plugin works good in separating them out; but i cannot use PHP if statements in the "style.css" file
So here are my questions:
is there a better way to write the two #media queries so they more clearly only work on the devices that I want?
thanks so much...

Answer 1

This is what I use for it to change css depending on the width of the screen. Hope it helps.
#media only screen and (max-width: 768px) {
body
{
margin:0px;
}
#wrapper
{
min-width: 0px;
width:auto;
}
#content
{
margin-left: 0px;
}
#nav
{
float:none;
width: auto;
padding: 0px;
}
#nav ul
{
text-align: center;
}
#nav li
{
display: inline;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0.75em;
padding-right: 0.75em;
}
footer
{
margin-left: 0;
}
}
#media only screen and (max-width: 480px) {
body
{
margin: 0px;
}
label
{
float: none;
text-align: left;
}
#wrapper
{
width: auto;
min-width: 0;
margin: 0;
}
#content
{
padding-top: 0.1em;
padding-bottom: 0.1em;
padding-right: 1em;
padding-left: 1em;
}
h1
{
margin: 0;
font-size: 1.5em;
padding-left: 0.3em;
}
#nav ul
{
padding: 0px;
}
#nav li
{
display: block;
margin: 0px;
border-style: solid;
border-width: 2px;
border-color: #330000;
}
#nav
{
display: block;
}
#content img
{
float: none;
padding: 0px;
margin: 0.1em;
}
#mobile
{
display: inline;
}
#desktop
{
display: none;
}
}

Answer 2

/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}