file browser

css/e20mediaQuery.php

<html>
 <head>
    <!-- ohne den Viewport bekomme ich auch auf dem Handy viel zu viele Pixel -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=yes"/>
<!--        <meta name="HandheldFriendly" content="true" />
        <meta name="apple-mobile-web-app-capable" content="YES" /> -->
        <meta charset="utf-8" />  
  <title><?php echo basename(__FILE__) ; ?></title>
 </head>
 </body>
screen <strong>max</strong> width
<ul>     
<li class="l480">@media (max-width: 480px)</li>
<li class="l600">@media (max-width: 600px)</li>
<li class="l768">@media (max-width: 768px)</li>
</ul>
screen <strong>min</strong> width
<ul>
<li class="w480">@media only screen and (min-width: 480px)</li>
<li class="w600">@media only screen and (min-width: 600px)</li>
<li class="w768">@media only screen and (min-width: 768px)</li>
<li class="w992">@media only screen and (min-width: 992px)</li>
<li class="w1382">@media only screen and (min-width: 1382px)</li>
</ul>

orientation
<ul>
<li class="por">@media only screen and (orientation: portrait) </li>
<li class="lan">@media only screen and (orientation: landscape) </li>
</ul>

 <h1>Source</h1>
<?php highlight_file(__FILE__) ?>
 </body>
<style type="text/css">
li {
background-color: red;
}
@media (max-width: 480px) {
    .l480 {background-color: green; }
}
@media (max-width: 600px) {
    .l600 {background-color: green; }
}
@media (max-width: 768px) {
    .l768 {background-color: green; }
}
@media only screen and (min-width: 480px) {
    .w480 {background-color: green; }
}
@media only screen and (min-width: 600px) {
    .w600 {background-color: green; }
}
@media only screen and (min-width: 768px) {
    .w768 {background-color: green; }
}

@media only screen and (min-width: 992px) {
    .w992 {background-color: green; }
}

@media only screen and (min-width: 1382px) { /* Styles */
    .w1382 {background-color: green; }
}
@media only screen and (orientation: portrait) {
    .por {background-color: green; }
}
@media only screen and (orientation: landscape) {
    .lan {background-color: green; }
}

</style>

</html>