User`s guide

Publishing on Kindle: Guidelines for Publishers
8 Media Queries
Media queries are blocks of CSS code that allow content creators to apply different styles to specific
Kindle devices (or a group of devices) using only one style sheet. Amazon has implemented media
queries as a way to help content creators build a better customer experience across devices.
Amazon recommends that content creators only use media queries if they solve a problem or provide a
better customer experience. For example, you can use media queries to:
• Create custom drop cap solutions for specific devices or groups of devices.
• Change light-colored text (yellow, baby blue, pink, etc.) to darker colors that provide better
contrast on
e Ink while retaining the original color on tablet devices.
• Increase the font size for fixed-format text pop-ups on
e Ink devices separately from tablets to
accommodate the difference in screen sizes.
• Display colored borders on
e Ink and colored backgrounds on tablets independently from each
other, allowing you to better replicate the print experience on tablets without sacrificing the
reading experience on
e Ink devices.
This section describes ways that you can use media queries to customize the reading experience on
Kindle e Ink devices, Fire tablets, and iPads. You can also use these same principles across all Kindle
platforms for devices of all aspect ratios.
Media queries are part of the W3 standard. For more information, visit
http://www.w3.org/TR/css3-
mediaqueries/
Media Query Guidelines 8.1
Support for two new media types enables content creators to use specific CSS based on the Mobi or KF8
file format: amzn-mobi and amzn-kf8.
• For KF8 CSS styles, use the media query @media amzn-kf8. This is only applied for the KF8
format.
• For Mobi CSS styles, use the media query @media amzn-mobi. This is only applied for the
Mobi format.
The @media screen and @media all styles continue to apply to both KF8 and Mobi.
8.1.1 Media Query Guideline #1: Use Correct CSS Syntax
Media queries consist of two parts: (1) the selector, which specifies the conditions of the media query;
and (2) the declaration block, which is rendered when the conditions of the media query are met.
In the following example, the blue background color is only applied if the format of the book is KF8 and
the aspect ratio of the device is 1280 x 800.
Example:
/* Kindle Fire (All) Formatting. */
@media amzn-kf8 and (device-aspect-ratio:1280/800) {
.blue_background {
background-color: blue;
}
}
Kindle Publishing Guidelines Amazon.com 63