<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>teste de media-query</title>
<style type="text/css">
@charset "utf-8";
.texto-01{
visibility:hidden;
}
.texto-02{
visibility:hidden;
}
.texto-03{
visibility:hidden;
}
.texto-04{
visibility:hidden;
}
.texto-05{
visibility:hidden;
}
.texto-06{
visibility:hidden;
}
.texto-07{
visibility:hidden;
}
.texto-08{
visibility:hidden;
}
p{
position:absolute;
background-color:#FF0;
color:#F00;
font-weight:bold;
width:35%;
text-align:center;
margin-left:30%;
top:90px;
left:50px;
}
@media screen and (min-width:600px) and (max-width:900px){
.texto-01 {
visibility:visible; /* ok - funcionou... */
}
}
@media screen and (min-width:900px) and (max-width:1100px){
.texto-02{
visibility:visible; /* ok - funcionou... */
}
}
@media screen and (min-width:1100px) and (max-width:1200px){
.texto-03{
visibility:visible /* ok - funcionou... */
}
}
@media screen and (min-width:1200px) and (max-width:1360px){
.texto-04{
visibility:visible /* ok - funcionou... */
}
}
@media screen and (min-width:1360px) and (max-width:1366px){
.texto-05{
visibility:visible /* ok - funcionou... */
}
}
@media screen and (min-width:1366px) and (max-width:1377px){
.texto-06{
visibility:visible /* ok - funcionou... */
}
}
@media screen and (min-width:1377px) and (max-width:1440px){
.texto-07{
visibility:visible;
}
}
@media screen and (min-width:1440px) and (max-width:2600px){
.texto-08{
visibility:visible
}
}
</style>
</head>
<body>
<p class="texto-01">Você está usando a resolução de 0800px</p>
<p class="texto-02">Você está usando a resolução de 1024px</p>
<p class="texto-03">Você está usando a resolução de 1152px</p>
<p class="texto-04">Você está usando a resolução de 1280px</p>
<p class="texto-05">Você está usando a resolução de 1360px</p>
<p class="texto-06">Você está usando a resolução de 1366px</p>
<p class="texto-07">Você está usando a resolução de 1400px</p>
<p class="texto-08">Você está usando a resolução de 1440px</p>
<hr />
<script "javascript">
document.write( "<hr><center>Resolução verdadeira:" + screen.width + "px <hr>");
</script>
</body>
</html>
