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;
}
}
