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.

Hulp-onderwerpen

Contact

Heb je feedback? Kun je je antwoord niet vinden op de Hulp-pagina's?

Contact

Mediaquery's

Mediaquery’s zijn blokken CSS-code waarmee contentmakers met slechts één enkel opmaakmodel verschillende stijlen op bepaalde Kindle-apparaten (of een groep apparaten) kunnen toepassen. Amazon heeft mediaquery’s geïmplementeerd om contentmakers te helpen een betere klantervaring te leveren op alle apparaten.

Amazon beveelt contentmakers aan om alleen mediaquery’s te gebruiken om een probleem op te lossen of een betere klantervaring te bieden. Je kunt mediaquery’s bijvoorbeeld gebruiken om:

  • Aangepaste oplossingen voor decoratieve initialen voor bepaalde apparaten of groepen apparaten te maken.
  • Licht gekleurde tekst (geel, zachtblauw, roze, enzovoort) in donkerder kleuren te wijzigen om een beter contrast op e-readers te bieden terwijl de oorspronkelijke kleur op tablets behouden blijft.
  • De lettertypegrootte voor tekstpop-ups met een vaste opmaak te vergroten op e-readers maar niet, of anders, op tablets, om rekening te houden met de verschillen in schermgrootte.
  • Gekleurde randen op e-readers en gekleurde achtergronden op tablets onafhankelijk van elkaar weer te geven, zodat je de gedrukte weergave beter kunt repliceren op tablets zonder dat de leeservaring op e-readers eronder lijdt.

In deze sectie worden manieren beschreven waarop je met mediaquery's de leeservaring op Kindle e-readers, Fire-tablets en iPads kunt aanpassen. Je kunt dezelfde methoden gebruiken voor elke Kindle en voor alle apparaten met alle beeldverhoudingen.

Opmerking: Bepaalde mediaquery's functioneren anders bij e-books met Verbeterde typografie dan bij KF8 of Mobi e-books.

Mediaquery's maken deel uit van de W3-standaard.



Richtlijnen voor mediaquery's

Dankzij de ondersteuning voor twee nieuwe mediatypen kunnen makers van content specifieke CSS-stijlen gebruiken, al naar gelang de Mobi- of KF8-bestandsindeling: amzn-mobi en amzn-kf8.

  • Gebruik voor KF8 CSS-stijlen de mediaquery @media amzn-kf8. Deze is alleen van toepassing op de KF8-indeling.
  • Gebruik voor KF8 CSS-stijlen de mediaquery @media amzn-mobi. Deze is alleen van toepassing op de Mobi-indeling.

De stijlen @media screen en @media all blijven van toepassing op zowel KF8 als Mobi.


Correcte CSS-syntaxis gebruiken

Mediaquery’s bestaan uit twee delen: (1) de selector die de voorwaarden van de mediaquery specificeert; en (2) het verklaringsblok dat wordt weergegeven wanneer aan de voorwaarden van de mediaquery wordt voldaan.

In het volgende voorbeeld wordt de blauwe kleur alleen toegepast als de indeling van het boek KF8 is en de beeldverhouding van het apparaat 1280 x 800 is.

Voorbeeld:

/* Kindle Fire-opmaak (alle). */

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

.blue_background { background-color: blue;

}

}



Een CSS-opmerking toevoegen voor elke mediaquery

Amazon raadt je aan een CSS-opmerking voor elke mediaquery toe te voegen om duidelijk te maken welk apparaat wordt bedoeld. (Een CSS-opmerking begint met /* en eindigt met */.)

Voorbeeld:

/* Kindle Fire-opmaak (alle) */

CSS-opmerkingen zijn voor de klanten onzichtbaar, maar maken het voor degene die aan het bestand werkt eenvoudiger om de code te doorlopen en problemen op te lossen.



Altijd niet-mediaquerycode gebruiken voor doelapparaten als e-readers

Optimaliseer altijd niet-mediaquerycode (standaard) voor Kindle e-readers (inclusief Kindle Voyage en Kindle Paperwhite). De standaardcode bevat de CSS-waarden die op een e-reader verschijnen wanneer geen enkele mediaquery met dat bepaalde apparaat overeenkomt.



Mediaquery’s moeten achter de niet-mediaquerycode staan

Aangezien CSS wordt toegepast in de volgorde waarin ze worden weergegeven, moet code die gericht is op meerdere apparaten (zoals de code device-aspect-ratio, die gericht is op alle Fire-tablets) worden weergegeven na eventuele niet-mediaquerycode.

In het volgende voorbeeld maakt de standaardcode een zwarte rand op elk apparaat voor elk element dat de klasse blue_background gebruikt. De mediaquery’s die volgen, verwijderen de rand en tonen een blauwe achtergrond op Fire-tablets en iPads voor elk element dat de klasse blue_background gebruikt. Op alle andere apparaten wordt alleen de zwarte rand weergegeven

Voorbeeld:

/* Standaardopmaak. Gebruik deze voor Kindle e-reader. Geen mediaquery's vereist. */

.blue_background { border: 1px solid black;

}

/* Kindle Fire-opmaak (alle). Gebruik dit voor alle Fire-tablets. */

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

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

}

}

/* iPad-opmaak (3, Air, Mini). Gebruik deze voor iPads. */

@media (device-width: 768px) {

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

}

}

In het bovenstaande voorbeeld verschijnt de zwarte rand die in de code voor de klasse blue_background is gedefinieerd nog wel op Fire-tablets als de border-eigenschap niet wordt overschreven. Als je de border in de mediaquery's voor Fire-tablets en iPads op none instelt, ben je er zeker van dat de standaardwaarden voor deze eigenschappen worden overschreven. Dit is handig als je niet-mediaquerycode gebruikt voor Kindle e-readers en geen gekleurde rand naar een Fire-tablet wilt overbrengen.



Code dupliceren

Als je mediaquery’s schrijft, neem dan alleen de CSS-klassen en -code op die je voor een bepaald apparaat moet wijzigen. Elke niet-mediaquerycode die je gebruikt, verschijnt automatisch op alle apparaten tenzij deze door een mediaquery wordt overschreven, zodat je de code die je op alle apparaten wilt toepassen, niet hoeft te herhalen.

In het volgende voorbeeld is het de bedoeling een gekleurde rand op Fire-tablets te vervangen door een gekleurde achtergrond terwijl de tekst voor alle apparaten rood blijft. Het linkervoorbeeld is onjuist omdat het herhalen van de klasse .red_font in de mediaquerycode niet nodig is.

Voorbeeld:

Onjuiste mediaquery

Juiste mediaquery

/* Standaardopmaak. */

.blue_background { border: 1px solid blue;

}

.red_font { color: red;

}

/* Kindle Fire-opmaak (alle) */

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

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

}

.red_font { color: red;

}

}

/* Standaardopmaak. */

.blue_background { border: 1px solid blue;

}

.red_font { color: red;

}

/* Kindle Fire-opmaak (alle) */

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

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

}

}




Mediaquery's gebruiken

De volgende tabel bevat voorbeelden van ondersteunde mediaquery's en de CSS die wordt toegepast op KF8, Mobi en andere readers:

Mediaquery's in CSS

CSS toegepast op KF8

CSS toegepast op Mobi

CSS toegepast op andere readers

@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;

}



Mediaquery's gebruiken voor neerwaartse compatibiliteit met MOBI

Mediaquery's maken het mogelijk dat één CSS-bestand zowel complexe CSS voor KF8 als eenvoudige CSS voor de Mobi-indeling levert. Enkele richtlijnen:

  • Complexe CSS kan worden genegeerd voor de Mobi-indeling als dezelfde klasse opnieuw wordt gedefinieerd binnen de mediaquery @media amzn-mobi.
  • Volgens de W3C-standaard moet voor mediaquery's het volgende gelden:
    • Het zijn individuele query's die worden opgegeven na de gemeenschappelijke CSS; of
      Voorbeeld:

      class1 {font-size: 2em;}

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

    • Voeg !important aan elke eigenschap toe om ervoor te zorgen dat deze voorrang krijgt.

      Voorbeeld:

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

      .class1 {font-size: 2em;}


    CSS

    CSS-stijlen toegepast op MOBI

    CSS-stijlen toegepast op 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;

    }


Een mediaquery aanleveren

Er zijn vier opties om mediaquery's aan te leveren:

  • Eén CSS-bestand
  • Verschillende CSS-bestanden
  • Style-tags
  • @import

Optie 1: één CSS-bestand gebruiken

Mediaquery's kunnen verschillende CSS voor de MOBI- en KF8-indeling specificeren in hetzelfde CSS-bestand. In het onderstaande voorbeeld is een andere .class1-klasse opgegeven voor de MOBI-indeling dan voor de andere indelingen in hetzelfde CSS-bestand.

Voorbeeld:

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


Optie 2: verschillende CSS-bestanden gebruiken

Mediaquery's kunnen verschillende CSS-bestanden voor de Mobi- en KF8-indeling specificeren in verschillende CSS-bestanden. In het onderstaande voorbeeld gebruiken de Mobi- en KF8-indelingen verschillende CSS-opmaakmodellen en worden de gemeenschappelijke CSS-stijlen toegepast op alle media.

Voorbeeld:

<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">


Optie 3: style-tags gebruiken

Mediaquery's kunnen verschillende CSS-bestanden voor de Mobi- en KF8-indelingen rechtstreeks specificeren via <style>-tags.

Voorbeeld:

<style type="text/css">

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


Optie 4: @import gebruiken

Mediaquery's kunnen verschillende CSS-bestanden voor de Mobi- en KF8-indeling direct specificeren met @import om verschillende CSS-bestanden op te nemen.

Voorbeeld:

@import

@import url(common.css);

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

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


De eigenschap display:none gebruiken met mediaquery's

Als je verschillende CSS wilt opgeven voor content in de MOBI 7- en de KF8-indeling, gebruik je de eigenschap display:none met mediaquery's. Ondersteuning voor de eigenschap display:none in de Mobi 7-indeling is beschikbaar in KindleGen 2.4 en latere versies.

Voorbeeld:

.defaultcontent { display: block;

}

.mobicontent { display: none;

}

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

}

.mobicontent { display: block;

}

}


Beperking bij het gebruik van de eigenschap display:none

Kindle beperkt het gebruik van de eigenschap display:none voor contentblokken van meer dan 10.000 tekens. Als de eigenschap display:none wordt toegepast op een contentblok van meer dan 10.000 tekens, retourneert KindleGen een fout.


Er is een onverwachte fout opgetreden. Probeer het later nog eens.
Je sessie is verlopen

Meld je aan om door te gaan

Aanmelden
edit