User`s guide

Publishing on Kindle: Guidelines for Publishers
8.1.2 Media Query Guideline #2: Add a CSS Comment Before Each Media Query
Amazon recommends that you add a CSS comment before each media query to clarify which device you
are targeting. (A CSS comment starts with /* and ends with */.)
Example:
/* Kindle Fire (All) Formatting */
CSS comments are invisible to the customer, but they make the code much easier to navigate and
troubleshoot for anyone who works on the file.
8.1.3 Media Query Guideline #3: Always Use Non-Media Query Code To Target E-Ink Devices
Always optimize your non-media query (“default”) code for Kindle e Ink devices (including Kindle Voyage
and Kindle Paperwhite). The default code contains the CSS values that will appear on an E-reader when
none of the media queries match that particular device.
8.1.4 Media Query Guideline #4: Media Queries Should Appear After Non-Media Query Code
Since CSS is applied in the order that it appears, code that targets multiple devices (such as the
device-aspect-ratio code that targets all Fire tablets) should appear after any non-media query
code.
In the following example, the default code creates a black border on every device for any element that
uses the blue_background class. The media queries that follow it remove the border and display a blue
background on Fire tablets and iPad for any element that uses the blue_background class. All other
devices will only display the black border.
Example:
/* Default Formatting. Use this for Kindle e-Ink. No media queries required. */
.blue_background {
border: 1px solid black;
}
/* Kindle Fire (All) Formatting. Use this to target all Kindle Fires. */
@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;
}
Kindle Publishing Guidelines Amazon.com 64