Media queries doesnt function?

Question

i m totally a newbie to responsive design. My media queries doesnt function. when i resize the window, it doesnt reconize the breakpoint i guess. i made two divs, one of them for desktop view and the other one is for the tablet view. I use the display: none property to have a desktop and mobile version.

Another question is, is there any way to configure media queries for all mobile devices ? or should i write css for every handy groups inviduel ? (like for iphone5, iphone6, nexus etc..)

.tablet-view{
    display: none;
}

.desktop-view{
    display: inline;
}
/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
    .desktop-view{
        display:none;
    }.tablet-view {

         display: inline;
     }
}

/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
    .desktop-view{
        display:none;
    }.tablet-view {

         display: inline;
     }
}

/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
    .desktop-view{
        display:none;
    }.tablet-view {

         display: inline;
     }
}

/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
    .desktop-view{
        display:none;
    }.tablet-view {

         display: inline;
     }
}

/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
    .desktop-view{
        display:none;
    }.tablet-view {

         display: inline;
     }
}

/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
    .desktop-view{
        display:none;
    }.tablet-view {

         display: inline;
     }
}

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
    .desktop-view{
        display:none;
    }.tablet-view {

         display: inline;
     }
}

/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
    .desktop-view{
        display:none;
    }.tablet-view {

         display: inline;
     }
}

/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
    .desktop-view{
display:none;
    }.tablet-view {

         display: inline;
     }

}

Answer 1

You are using device-width. When you resize the window of the browser you don't change the width of the device thus the media query doesn't apply. Try on different devices or with the Chrome device mode in the DevTools.

Answer 2

Try using max-width and min-width only without 'device'.