/*********************** RESPONSIVE *************************/
/********************** POR TAMAÑOS *************************/
@media only screen and (max-width : 220px) {
}
@media only screen and (min-width : 221px) and (max-width : 300px) {
}
@media only screen and (min-width : 301px) and (max-width : 400px) {
}
@media only screen and (min-width : 401px) and (max-width : 500px) {
}
@media only screen and (min-width : 501px) and (max-width : 600px) {
}
@media only screen and (min-width : 601px) and (max-width : 700px) {
}
@media only screen and (min-width : 701px) and (max-width : 800px) {
}
@media only screen and (min-width : 801px) and (max-width : 900px) {
}
@media only screen and (min-width : 901px) and (max-width : 1000px) {
}
@media only screen and (min-width : 1001px) and (max-width : 1100px) {
}
@media only screen and (min-width : 1101px) and (max-width : 1223px) {
}
@media only screen and (min-width : 1224px) {
}
@media only screen and (min-width : 1824px) {
}
<?
//GENERADOR LINEAS ALTURA
for ($i = 100; $i < 1200; $i++ ) {
$i = $i + 19;
$o = $i - 19;
$u = $i - 10;
echo "@media only screen and (min-height : {$o}px) and (max-height : {$i}px) { #backFix { height: {$u}px; } } \r\n";
}
?>
sábado, 13 de mayo de 2017
CSS3 Responsive Media File Template - Plantilla de archivo CSS3 para hacer una web responsiva
/*********************** RESPONSIVE *************************/
/******************** POR DISPOSITIVOS **********************/
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
}
/* iPhone 4 ----------- */
@media only screen
and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}
Suscribirse a:
Entradas (Atom)