Media Queries

En CSS fil jeg har lavet, for at holde styr på de forskellige størrelser og medier.
Her benytter jeg en ydre div id kaldet wrap, eller nærmere dens :before til at printe information på skærmen.

Har din html kode ikke en <div id="wrap"> ...</div> som ydre div, må du selv ændre CSS filen så den passer til din htm!

Den første del af koden er rette mod WEB DEVELOPER - http://chrispederick.com/work/web-developer/ - View Responsive Layouts og den sidste direkte mod Apple Ipad (den store!)

/* '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' */
/* ''''''''''''''''''''''''''''''WEB DEVELOPER''''''''''''''''''''''''''''''' */
/* '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' */

@media screen and (max-width: 320px) {

#wrap:before{
content: "Mobile portrait (320x480)";
color: #ffffff;
position: absolute;
top: 10px;
left: 10px;
background: #000000;
padding: 2px 10px;
border-radius: 10px;
}

}

/* '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' */

@media screen and (min-width: 320px) and (orientation: landscape) {

#wrap:before{
content: "Mobile landscape (480x320)";
color: #ffffff;
position: absolute;
top: 10px;
left: 10px;
background: #000000;
padding: 2px 10px;
border-radius: 10px;
}

}

/* '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' */

@media screen and (min-width: 600px) and (orientation: portrait) {

#wrap:before{
content: "Small tablet portrait (600x800)";
color: #ffffff;
position: absolute;
top: 10px;
left: 10px;
background: #000000;
padding: 2px 10px;
border-radius: 10px;
}

}

/* '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' */

@media screen and (min-width: 800px) and (orientation: landscape) {

#wrap:before{
content: "Small tablet landscape (800x600)";
color: #ffffff;
position: absolute;
top: 10px;
left: 10px;
background: #000000;
padding: 2px 10px;
border-radius: 10px;
}

}

/* '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' */

@media screen and (min-width: 768px) and (orientation: portrait) {

#wrap:before{
content: "Tablet portrait (768x1024)";
color: #ffffff;
position: absolute;
top: 10px;
left: 10px;
background: #000000;
padding: 2px 10px;
border-radius: 10px;
}

}

@media screen and (min-width: 1024px) and (orientation: landscape) {

#wrap:before{
content: "Tablet landscape (1024x768)";
color: #ffffff;
position: absolute;
top: 10px;
left: 10px;
background: #000000;
padding: 2px 10px;
border-radius: 10px;
}

}

/* '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' */
/* ''''''''''''''''''''''''''''''''''''IPAD'''''''''''''''''''''''''''''''''' */
/* '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' */


/* Ipad */

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {

#wrap:before{
content: "iPads (landscape)";
color: #ffffff;
position: absolute;
top: 10px;
left: 10px;
background: #000000;
padding: 2px 10px;
border-radius: 10px;
}

}

/* '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' */

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {

#wrap:before{
content: "iPads (portrait)";
color: #ffffff;
position: absolute;
top: 10px;
left: 10px;
background: #000000;
padding: 2px 10px;
border-radius: 10px;
}

}