English | Help | Sign in

Please rate your experience using this page


Delighted

Satisfied

Disappointed

Thank you! We appreciate your feedback.

Click here to take our survey and give us detailed feedback. If you're having a problem and need assistance, please contact us.

Argomenti della guida

Contattaci

Vuoi lasciare un feedback? Non riesci a trovare la risposta che cerchi nelle pagine di assistenza?

Contattaci

Media queries

Le media queries sono blocchi di codice CSS che consentono ai creatori di contenuti di applicare diversi stili a dispositivi (o gruppi di dispositivi) Kindle specifici utilizzando un unico foglio di stile. Amazon ha implementato le media queries per aiutare i creatori di contenuti a migliorare l'utilizzo dei dispositivi da parte degli utenti.

Amazon consiglia ai creatori di contenuti di usare le media queries solo se necessarie per risolvere un problema o migliorare l'esperienza di lettura degli utenti. Ad esempio, puoi usare le media queries per:

  • Creare capilettera personalizzati per dispositivi o gruppi di dispositivi specifici.
  • Modificare il testo di colore chiaro (giallo, azzurro, rosa e così via) in tonalità più scure per migliorare il contrasto sui lettori di eBook, senza modificare il colore originale sui tablet.
  • Aumentare la dimensione del carattere dei pop-up con testo a impaginazione fissa sui lettori di eBook in modo indipendente rispetto ai tablet, affinché si adatti a schermi di dimensioni diverse.
  • Visualizzare i bordi colorati sui lettori di eBook e gli sfondi colorati sui tablet in modo indipendente, consentendo una riproduzione migliore dell'effetto di stampa sui tablet, senza compromettere l'esperienza di lettura sui lettori di eBook.

Questa sezione descrive le modalità di utilizzo delle media queries per personalizzare l'esperienza di lettura su lettori di eBook Kindle, tablet Fire e iPad. Puoi applicare gli stessi principi a tutte le piattaforme Kindle per dispositivi di tutte le proporzioni.

Nota: alcune media queries possono funzionare in modo diverso negli eBook con composizione migliorata e in quelli con formato KF8 o Mobi.

Le media queries fanno parte dello standard W3.



Linee guida per le media queries

Il supporto di due nuovi tipi di contenuti multimediali permette ai creatori di contenuti di usare CSS specifici basati sul formato file Mobi o KF8: amzn-mobi e amzn-kf8.

  • Per gli stili CSS per il formato KF8, usa la media query @media amzn-kf8. Questo elemento si applica solo al formato KF8.
  • Per gli stili CSS per il formato Mobi, usa la media query @media amzn-mobi. Questo elemento si applica solo al formato Mobi.

Gli stili @media screen e @media all continuano a essere applicabili a entrambi i formati, KF8 e Mobi.


Usa la sintassi CSS corretta

Le media queries sono composte da due parti: (1) il selector, che specifica le condizioni della media query; (2) il declaration block, che viene visualizzato quando le condizioni della media query vengono soddisfatte.

Nell'esempio seguente, il colore blu viene applicato allo sfondo solo se il formato del libro corrisponde a KF8 e le proporzioni del dispositivo sono 1280 x 800.

Esempio:

/* Kindle Fire (All) Formatting. */

@media amzn-kf8 and (device-aspect-ratio:1280/800) {

.blue_background { background-color: blue;

}

}



Aggiungi un commento CSS prima di ogni media query

Amazon consiglia di aggiungere un commento CSS prima di ogni media query per specificare il dispositivo di interesse (un commento CSS inizia con /* e finisce con */).

Esempio:

/* Kindle Fire (All) Formatting */

I commenti CSS sono invisibili agli utenti, ma rendono più semplice la navigazione nel codice e la risoluzione dei problemi per chiunque lavori sul file.



Usa sempre un codice query di tipo non media per i lettori di eBook

Ottimizza sempre il tuo codice query di tipo non media ("di default") per i lettori di eBook Kindle (inclusi Kindle Voyage e Kindle Paperwhite). Il codice di default contiene i valori CSS che appariranno su un lettore di eBook quando nessuna delle media queries corrisponde a quel dispositivo specifico.



Le media queries devono essere visualizzate dopo il codice query di tipo non media

Poiché la sintassi CSS è applicata nell'ordine in cui è visualizzata, il codice che si riferisce a più dispositivi (come device-aspect-ratio che si riferisce a tutti i tablet Fire) deve essere visualizzato dopo eventuali codici query di tipo non media.

Nell'esempio seguente, il codice di default crea un bordo nero su ogni dispositivo per qualsiasi elemento che utilizza la classe blue_background. Le media queries che lo seguono rimuovono il bordo e mostrano uno sfondo blu sui tablet Fire e sugli iPad per ogni elemento che utilizza la classe blue_background. Su tutti gli altri dispositivi verrà visualizzato solo il bordo nero.

Esempio:

/* Default Formatting. Use this for Kindle E-reader. No media queries required. */

.blue_background { border: 1px solid black;

}

/* Kindle Fire (All) Formatting. Use this to target all Fire Tablets. */

@media amzn-kf8 and (device-aspect-ratio:1280/800) {

.blue_background { background-color: blue; border: none;

}

}

/* iPad (3, Air, Mini) Formatting. Use this for any iPad. */

@media (device-width: 768px) {

.blue_background { background-color: blue; border: none;

}

}

Nell'esempio precedente, il bordo nero definito nel codice di default per la classe blue_background continua a essere visualizzato sui tablet Fire se la proprietà border non viene annullata. L'impostazione di border su none nelle media queries per i tablet Fire e gli iPad consente di annullare i valori di default di queste proprietà. Questo è utile se utilizzi un codice query di tipo non media per i lettori di eBook Kindle e non desideri trasferire un bordo colorato su un tablet Fire.



Codici doppi

Durante la scrittura delle media queries, includi solo le classi e i codici CSS da modificare su un dispositivo specifico. Ogni codice di tipo non media query utilizzato verrà visualizzato automaticamente su tutti i dispositivi, a meno che non sia sovrascritto con una media query; non è perciò necessario ripetere un codice da applicare a tutti i dispositivi.

Nell'esempio seguente, l'obiettivo è quello di annullare un bordo colorato sui tablet Fire e sostituirlo con uno sfondo colorato, mantenendo il colore rosso del testo su tutti i dispositivi. L'esempio sulla sinistra non è corretto poiché la ripetizione della classe .red_font nel codice della media query non è necessaria.

Esempio:

Media query errata

Media query corretta

/* Default formatting. */

.blue_background { border: 1px solid blue;

}

.red_font { color: red;

}

/* Kindle Fire (All) Formatting */

@media amzn-kf8 and (device-aspectratio:1280/800) {

.blue_background { background-color: blue; border: none;

}

.red_font { color: red;

}

}

/* Default formatting. */

.blue_background { border: 1px solid blue;

}

.red_font { color: red;

}

/* Kindle Fire (All) Formatting */

@media amzn-kf8 and (device-aspectratio:1280/800) {

.blue_background { background-color: blue; border: none;

}

}




Uso delle media queries

La seguente tabella riporta alcuni esempi di media queries supportate e di CSS applicati ai formati KF8, MOBI e ad altri lettori:

Media queries in CSS

CSS applicati al formato KF8

CSS applicati al formato Mobi

CSS applicati ad altri lettori

@media amzn-mobi

{

.class1 { font=size:3em; font-weight: bold;

}

}

-

fontsize:3em; font-weight:

bold;

-

.class1 { font-style: italic; font-size:2em;

}

@media amzn-mobi

{

.class1 { font-size:3em; font-weight: bold;

}

}

font-style:

italic;

font-size: 2em;

font-style:

italic; font-size: 3em; font-weight:

bold;

font-style:

italic; font-size:2em;

@media amzn-mobi

{

.class1 { font-size:3em !important;

font-weight: bold

!important;

}

}

.class1 { font-style: italic; font-size:2em;

}

font-style:

italic; font-size:2em;

font-style:

italic; fontsize:3em; font-weight:

bold;

font-style:

italic; font-size:2em;

@media not amzn-mobi

{

.firstletter

{ float: left; font-size: 3em; line-height: 1; font-weight: bold; padding-right: .2em; margin: 10px

}

}

@media amzn-mobi

{

.firstletter { font-size: 3em;

}

}

.firstletter

{ float: left; font-size:

3em; line-height:

1; font-weight:

bold; padding-right:

.2em;

margin: 10px

}

.firstletter

{ font-size:

3em;

}

.firstletter

{ float: left; font-size:

3em; line-height:

1; font-weight:

bold; padding-right:

.2em;

margin: 10px

}

}

@media amzn-kf8

{ p {

color: red;

}

}

p {

color: red;

}



Uso delle media queries per la retrocompatibilità con il formato MOBI

Le media queries consentono a un file CSS di fornire CSS complessi per il formato KF8 e CSS di base per il formato Mobi. Alcune linee guida:

  • Un CSS complesso può essere ignorato per il formato Mobi ridefinendo la stessa classe all'interno della media query @media amzn-mobi.
  • Secondo lo standard W3C, le media queries dovrebbero essere:
    • Singole query specificate dopo il CSS comune, oppure
      Esempio:

      class1 {font-size: 2em;}

      @media amzn-mobi {.class1 {font-size: 3em;}}

    • Includi !important in ogni proprietà per applicare la precedenza.

      Esempio:

      @media amzn-mobi {.class1 {font-size: 3em !important;}}

      .class1 {font-size: 2em;}


    CSS

    Stili CSS applicati a MOBI

    Stili CSS applicati al formato KF8

    p { font-style: normal;

    } h { font-weight: bold;

    } div.example { margin: 10px

    } ul { margin: 20px; padding-left: 30px;

    }

    .firstletter { float: left; font-size: 3em; line-height: 1; font-weight: bold; padding-right: .2em;

    }

    @media amzn-mobi { .firstletter { float: left; font-size: 3em; line-height: 0; font-weight: bold; padding-right: 0;

    }

    }

    p { font-style: normal;

    } h { font-weight: bold;

    } div.example { margin: 10px

    } ul { margin: 20px; padding-left: 30px;

    }

    .firstletter { float: left; font-size: 3em; line-height: 0; font-weight: bold; padding-right: 0;

    )

    p { font-style: normal;

    } h { font-weight: bold;

    } div.example { margin: 10px

    } ul { margin: 20px; padding-left: 30px;

    }

    .firstletter { float: left; font-size: 3em; line-height: 1; font-weight: bold; padding-right: .2em;

    }


Invio di una media query

Esistono quattro opzioni per inviare le media queries:

  • Un file CSS
  • Più file CSS
  • Tag di stile
  • @import

Opzione 1. Uso di un file CSS

Le media queries possono specificare diversi CSS per i formati MOBI e KF8 nello stesso file CSS. Nell'esempio seguente è specificata una classe .class1 diversa per il formato MOBI rispetto agli altri formati all'interno dello stesso file CSS.

Esempio:

.class1 {
font-style: italic;
font-size:2em;
}
@media amzn-mobi {
.class1 {
font-size:3em;
font-weight: bold;
}
}


Opzione 2. Uso di più file CSS

Le media queries possono specificare CSS diversi per i formati Mobi e KF8 in più file CSS. Nell'esempio di seguito i formati Mobi e KF8 utilizzano diversi fogli di stile CSS e gli stili CSS comuni si applicano a tutti i contenuti multimediali.

Esempio:

<link href="common.css" rel="stylesheet" type="text/css">

<link href="kf8.css" media="amzn-kf8" rel="stylesheet" type="text/css">

<link href="mobi.css" media="amzn-mobi" rel="stylesheet" type="text/css">


Opzione 3. Uso di tag di stile

Le media queries possono specificare CSS diversi per i formati Mobi e KF8 utilizzando direttamente i tag <style>.

Esempio:

<style type="text/css">

<style type="text/css" media="amzn-kf8"> <style type="text/css" media="amzn-mobi">


Opzione 4. Uso di @import

Le media queries possono specificare CSS diversi per i formati Mobi e KF8 utilizzando direttamente @import per includere diversi file CSS.

Esempio:

@import

@import url(common.css);

@import url(kf8.css) amzn-kf8;

@import url(mobi7.css) amzn-mobi;


Uso della proprietà display:none con le media queries

Per specificare CSS diversi per il contenuto in formato MOBI 7 e KF8, usa la proprietà display:none con le media queries. Il supporto della proprietà display:none nel formato Mobi 7 è disponibile in KindleGen 2.4 e versioni successive.

Esempio:

.defaultcontent { display: block;

}

.mobicontent { display: none;

}

@media amzn-mobi { .defaultcontent { display: none;

}

.mobicontent { display: block;

}

}


Limitazioni nell'uso della proprietà display:none

Kindle limita l'uso della proprietà display:none ai blocchi di contenuto con più di 10.000 caratteri. Se la proprietà display:none è applicata a un blocco di contenuto con più di 10.000 caratteri, KindleGen restituisce un errore.


Si è verificato un errore imprevisto. Riprova più tardi.
La tua sessione è scaduta

Accedi per continuare

Accedi
edit