La creación de una página web para móviles con diferentes estilos css

Me gustaría saber si puedo utilizar 3 diferentes archivos css, el navegador móvil de los iPhone /iPad, la descarga de los 3 conjuntos de archivos css, o simplemente el que es relevante por el tamaño de la pantalla? mediante el uso de este.

<link media="only screen and (max-width: 320px)" href="iphone-portrait.css" type= "text/css" rel="stylesheet">
<link media="only screen and (min-width: 321px) and (max-width: 480px)" href="iphone-landscape.css" type= "text/css" rel="stylesheet">
<link media="only screen and (min-device-width: 481px)" href="desktop.css" type="text/css" rel="stylesheet">

He encontrado la respuesta a la utilización de http://www.w3schools.com/html5/html5_app_cache.asp

incluso si usted tiene 3 diferentes archivos css para el móvil, después de haber css almacenados para el iphone, será minimizar el ancho de banda de 1 sola descarga de cada uno de los css y esto acelerará el sitio web utilizando menos ancho de banda.

crear una .htaccess y el lugar esta en.

AddType text/cache-manifest manifest

a continuación, crear otro archivo llamado alguna u como demo.manifiesto y el lugar en

CACHE MANIFEST 
# v0.0.1
icon.png
desktop.css
iphone-landscape.css
iphone-portrait.css

a continuación, en la página html que usted tiene que declarar por hacer esto.

<html manifest="demo.manifest">

una vez que la actualización de la css y los archivos, usted sólo tendrá que actualizar la demo.manifiesto y el navegador con la descarga de la nueva versión de demostración.manifiesto y todo su contenido una vez más.

Creo que el tamaño de la pantalla depende de la configuración de la página real. I. e., si la página tiene el estilo «primero.css» y es para dispositivos móviles, se va a leer eso. Por cierto, esto de las descargas de todos los 3 archivos.
Depende de los métodos que utilice para el suministro de los tres hojas de estilo y el navegador en cuestión.
Creo que debería haber preguntado una pregunta diferente: ¿cómo en la tierra de asociar un determinado archivo CSS con un tamaño de pantalla determinado? HTML en sí no tiene medios para hacer eso! Usted necesidad de utilizar PHP / Javascript para participar en ese tipo de lógica condicional. Como una nota del lado, tiendo a preferir a crear un ‘móvil’ de la página y dejar que el dispositivo móvil de la manija de la adaptación del diseño del lugar de programación para cada tipo de dispositivo.
Yo uso <link media=»only screen and (max-width: 320 px)» href=»iphone-retrato.css» type= «text/css» > definir el css, y <link media=»only screen and (min-width: 321px) y (max-width: 480px)» href=»iphone-paisaje.css» type= «text/css» > definir en el paisaje.

OriginalEl autor 4Rabbits | 2012-07-03

3 Kommentare

  1. 8

    Aquí están las preguntas de los medios de dispositivos estándar (de CSS-Tricks.com):

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {
    /* Styles */
    }
    
    /* Smartphones (landscape) ----------- */
    @media only screen 
    and (min-width : 321px) {
    /* Styles */
    }
    
    /* Smartphones (portrait) ----------- */
    @media only screen 
    and (max-width : 320px) {
    /* Styles */
    }
    
    /* iPads (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) {
    /* Styles */
    }
    
    /* iPads (landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape) {
    /* Styles */
    }
    
    /* iPads (portrait) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : portrait) {
    /* Styles */
    }
    
    /* Desktops and laptops ----------- */
    @media only screen 
    and (min-width : 1224px) {
    /* Styles */
    }
    
    /* Large screens ----------- */
    @media only screen 
    and (min-width : 1824px) {
    /* Styles */
    }
    
    /* iPhone 4 ----------- */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
    }

    A todas las áreas que decir /* Estilos */se donde colocar el CSS separado los componentes de los diferentes dispositivos que están apoyando.

    **Por FAVOR NOTA: esta es una muy complicado de medios de consulta de la hoja. Yo normalmente eliminar el paisaje cosas, y el iPhone consulta de medios de comunicación se ocupa de la mayoría de los smartphones, así que no hay normalmente no hay necesidad de tener dos separadas para que. Aquí es lo que yo suelo utilizar:

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {
    /* Styles */
    }
    
    /* iPads (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) {
    /* Styles */
    }
    
    /* Desktops and laptops ----------- */
    @media only screen 
    and (min-width : 1224px) {
    /* Styles */
    }
    
    /* iPhone 4 ----------- */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
    }
    esto es sólo quieres que yo quería, una lista de todas las dimensiones, gracias.
    Gran fragmento de códigos. Cómo debo utilizar la segunda versión de el código anterior para comprobar si es (IE10 || Otro Navegador) o (a MENOS DE IE10) si se trata de equipos de Sobremesa y portátiles?

    OriginalEl autor Mike Legacy

  2. 1

    Si usted llama a todos ellos, todos ellos estarán cargados. El mejor plan es el uso de consultas de medios de comunicación para separar, sino para servir a todos los estilos en una hoja.

    OK, ahora que está fresco CSS3 característica nunca supe de!
    Yo estoy usando el <link media=»only screen and (max-width: 320 px)» href=»iphone-retrato.css» type= «text/css» > que será la única css cargado si se ven en el iphone en la vista vertical?
    Los navegadores no son consistentes en esto – véase: stackoverflow.com/questions/6311235/…
    caniuse.com/#search=media

    OriginalEl autor Dave Everitt

  3. 0

    Descargará todos ellos, a menos que crear algo de javascript para evitar que.

    por lo que se descarga todo el css?
    Sí, a menos que te impide hacerlo.

    OriginalEl autor dezman

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea