亚马逊 Kindle 电子书发布指南（四）附录

更新时间： 编辑：书伴 分类：排版制作 2 条留言

目录

◄ 返回本文主目录

19 附录 D：媒体查询
19.1 媒体查询指南
19.1.1 使用正确的 CSS 语法
19.1.2 在每个媒体查询之前添加一个 CSS 评论
19.1.3 始终使用非媒体查询代码定位电子书阅读器设备
19.1.4 媒体查询应显示在非媒体查询代码之后
19.1.5 避免复制代码
19.2 使用媒体查询
19.3 应用媒体查询，实现与 Mobi 格式的反向兼容
19.3.1 提交媒体查询
19.3.1.1 选项 1：通过一个 CSS 文件
19.3.1.2 选项 2：通过几个不同的 CSS 文件
19.3.1.3 选项 3：使用样式标签
19.3.1.4 选项 4：使用 @import
19.3.2 在媒体查询中使用 display:none 属性
19.3.2.1 使用 display:none 属性显示复杂表格
19.3.2.2 使用 display:none 属性显示 SVG 图片
19.3.2.3 使用 display:none 属性的限制

18 附录 D：媒体查询

媒体查询是 CSS 代码块，可以使内容创建者仅使用一张样式表即可将不同样式应用于特定 Kindle 设备（或设备组）。亚马逊已实施媒体查询，以帮助内容创建者跨设备构建更好的客户体验。

亚马逊建议内容创建者在解决问题或提供更好的客户体验时仅使用媒体查询。例如，您可以使用媒体查询执行以下操作：

  • 针对特定设备或设备组，创建首字下沉解决方案。
  • 将浅色文本（黄色、淡蓝色、粉红色等）更改为深色，以在电子书阅读器设备上提供更好的对比度，同时在平板电脑设备上保留原始颜色。
  • 在电子书阅读器设备上（不包括平板电脑）单独增加固定版式文本弹出窗口的字体大小，以适应不同尺寸的屏幕。
  • 在电子书阅读器设备上显示彩色边框并在平板电脑上显示彩色背景（彼此独立），从而使您更好地在平板电脑上再现纸书体验，且不会影响电子书阅读器设备上的阅读体验。

本节介绍如何使用媒体查询在 Kindle 电子书阅读器设备、Fire 平板电脑和 iPad 上自定义阅读体验。此外，您还可以在各种纵横比设备的 Kindle 平台之间应用这些相同原则。
媒体查询是 W3 标准的一部分。有关更多信息，请访问 http://www.w3.org/TR/css3-mediaqueries/

19.1 媒体查询指南

支持以下两类新媒体，允许内容创建者使用基于 Mobi 或 KF8 文件格式的特定 CSS：amzn-mobi 和 amzn-kf8。

  • 对于 KF8 CSS 样式，使用媒体查询 @media amzn-kf8。仅适用于 KF8 格式。
  • 对于 Mobi CSS 样式，使用媒体查询 @media amzn-mobi。仅适用于 Mobi 格式。

@media screen 和 @media all 样式继续应用于 KF8 和 Mobi。

19.1.1 使用正确的 CSS 语法

媒体查询由两部分组成：(1) 选择器，用于指定媒体查询条件；(2) 声明块，在符合媒体查询条件时呈现。

在以下示例中，如果电子书格式为 KF8 且设备的纵横比为 1280 x 800，则仅应用蓝色背景。

示例：

/* Kindle Fire（所有）格式设置。*/

@media amzn-kf8 and (device-aspect-ratio:1280/800) {
    .blue_background {
        background-color: blue;
    }
}

19.1.2 在每个媒体查询之前添加一个 CSS 评论

亚马逊建议您在每个媒体查询之前添加一个 CSS 评论，以声明目标设备。（CSS 评论以 /* 开头，以 */ 结尾。）

示例：

/* Kindle Fire（所有）格式设置 */

CSS 评论对客户不可见，但易于导航代码以及为使用文件的人员排除故障。

19.1.3 始终使用非媒体查询代码定位电子书阅读器设备

对于 Kindle 电子书阅读器设备（包括 Kindle Voyage 和 Kindle Paperwhite），始终优化您的非媒体查询（“默认”）代码。默认代码包含 CSS 值，当没有媒体查询与具体设备匹配时，电子阅读器上将显示这些 CSS 值。

19.1.4 媒体查询应显示在非媒体查询代码之后

由于按显示顺序应用 CSS，因此匹配多个设备的代码（如匹配所有 Fire 平板电脑的 device-aspectratio 代码）应显示在非媒体查询代码之后。

在以下示例中，对于每个使用 blue_background 类的元素，默认代码会在每台设备上创建一个黑色边框。对于每个使用 blue_background 类的元素，进行跟踪的媒体查询会删除该边框，并在 Fire 平板电脑和 iPad 上显示蓝色背景。所有其他设备将仅显示黑色边框。

示例：

/* 默认格式设置。将之用于 Kindle 电子书阅读器。不需要媒体查询。*/

.blue_background {
    border: 1px solid black;
}

/* Kindle Fire（所有）格式设置。将之用于所有 Fire 平板电脑。*/

@media amzn-kf8 and (device-aspect-ratio:1280/800) {
    .blue_background {
        background-color: blue;
        border: none;
    }
}

/* iPad（3、Air、Mini）格式设置。将之用于任何 iPad。*/

@media (device-width: 768px) {
    .blue_background {
        background-color: blue;
        border: none;
    }
}

在上述示例中，如果 border 属性未被重写，则针对 blue_background 类在默认代码中定义的黑色边框仍将显示在 Fire 平板电脑上。针对 Fire 平板电脑和 iPad，在媒体查询中将 border 设置为 none，可确保重写这些属性的默认值。如果您要使用非媒体查询代码定位 Kindle 电子书阅读器设备且不希望将彩色边框传输到 Fire 平板电脑，这将很有帮助。

19.1.5 避免复制代码

当编写媒体查询时，仅包含 CSS 类和要对具体设备更改的代码。您使用的任何非媒体查询代码将自动显示在所有设备上，除非媒体查询将其覆盖，所以您无需对要应用于所有设备的代码进行复制。

在以下示例中，要求覆盖 Fire 平板电脑上的彩色边框并使用彩色背景进行替换，同时将所有设备上的文本保持红色。左侧示例是错误的，因为没有必要在媒体查询代码中复制 .red_font 类。

示例：

错误媒体查询：

/* 默认格式设置。*/

.blue_background {
    border: 1px solid blue;
}

.red_font {
    color: red;
}

/* Kindle Fire（所有）格式设置 */

@media amzn-kf8 and (device-aspectratio:1280/800) {
    .blue_background {
        background-color: blue;
        border: none;
    }
    .red_font {
        color: red;
    }
}

正确媒体查询：

/* 默认格式设置。*/

.blue_background {
    border: 1px solid blue;
}

.red_font {
    color: red;
}

/* Kindle Fire（所有）格式设置 */

@media amzn-kf8 and (device-aspectratio:1280/800) {
    .blue_background {
        background-color: blue;
        border: none;
    }
}

19.2 使用媒体查询

下表所列示例为 Kindle 支持的各种媒体查询、以及适用于 KF8、Mobi 和其它阅读器的 CSS：

示例 1:

CSS 中的媒体查询：

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

适用于 KF8 格式的 CSS：

无

适用于 Mobi 格式的 CSS：

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

适用于其他阅读器的 CSS：

无

示例 2:

CSS 中的媒体查询：

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

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

适用于 KF8 格式的 CSS：

font-style: italic;
font-size: 2em;

适用于 Mobi 格式的 CSS：

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

适用于其他阅读器的 CSS：

font-style: italic;
font-size: 2em;

示例 3:

CSS 中的媒体查询：

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

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

适用于 KF8 格式的 CSS：

font-style: italic;
font-size: 2em;

适用于 Mobi 格式的 CSS：

font-style: italic;
fontsize: 3em;
font-weight: bold;

适用于其他阅读器的 CSS：

font-style: italic;
font-size: 2em;

示例 4:

CSS 中的媒体查询：

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

适用于 KF8 格式的 CSS：

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

适用于 Mobi 格式的 CSS：

.firstletter {
    font-size: 3em;
}

适用于其他阅读器的 CSS：

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

示例 5:

CSS 中的媒体查询：

@media amzn-kf8 {
    p {
        color: red;
    }
}

适用于 KF8 格式的 CSS：

p {
    color: red;
}

适用于 Mobi 格式的 CSS：

无

适用于其他阅读器的 CSS：

无

19.3 应用媒体查询，实现与 Mobi 格式的反向兼容

媒体查询允许一个 CSS 文件为 KF8 格式提供复杂的 CSS 样式，同时为 Mobi 格式提供基本 CSS 样式。下面是部分指南：

您可以重新定义 @media amzn-mobi 媒体查询里的同一个类，为 Mobi 格式调整复杂的 CSS。

根据 W3C 标准，媒体查询应该是：

在通用 CSS 之后指定的个别查询（例如，amzn-mobi）

示例：

class1 {
    font-size: 2em;
}

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

为了执行优先级，在每个属性里都包含 !important。

示例：

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

.class1 {
    font-size: 2em;
}

CSS：

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

适用于 Mobi 格式的 CSS 样式：

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

适用于 KF8 格式的 CSS 样式：

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

18.3.1 提交媒体查询

我们为出版商提供下面四种媒体查询提交方式：

  • 一个 CSS 文件
  • 几个不同的 CSS 文件
  • 样式标签
  • @import
19.3.1.1 选项 1：通过一个 CSS 文件

媒体查询可在同一个 CSS 文件中针对 Mobi 格式和 KF8 格式指定不同的 CSS。在以下示例中，在同一个 CSS 文件中为 Mobi 格式（而不是其他格式）指定了不同的 .class1 类。

示例：

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

@media amzn-mobi {
    .class1 {
        font-size: 3em;
        font-weight: bold;
    }
}
19.3.1.2 选项 2：通过几个不同的 CSS 文件

媒体查询可具体针对 Mobi 格式和 KF8 格式，在不同的 CSS 文件中指定不同的 CSS。在以下示例中，Mobi 格式和 KF8 格式采用了不同的 CSS 样式表，通用 CSS 样式则适用于所有媒体。

示例：

<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">
19.3.1.3 选项 3：使用样式标签

媒体查询可通过 <style> 标签，直接指定 Mobi 格式和 KF8 格式的不同 CSS。

示例：

<style type="text/css">
<style type="text/css" media="amzn-kf8">
<style type="text/css" media="amzn-mobi">
19.3.1.4 选项 4：使用 @import

媒体查询可通过 @import 包括不同的 CSS 文件，直接指定 Mobi 格式和 KF8 格式的不同 CSS。

示例：

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

19.3.2 在媒体查询中使用 display:none 属性

要为 Mobi 7 和 KF8 格式的内容指定不同的 CSS，可在媒体查询中使用 display:none 属性。KindleGen 2.4 及更新版本支持在 Mobi 7 格式中使用 display:none 属性。

示例：

.defaultcontent {
    display: block;
}

.mobicontent {
    display: none;
}

@media amzn-mobi {
    .defaultcontent {
        display: none;
    }
    .mobicontent {
        display: block;
    }
}
19.3.2.1 使用 display:none 属性显示复杂表格

KF8 支持广泛的表格，但是复杂的表格在 Mobi 7 中并没有很好的显示效果。使用 display:none 属性，您可将以 HTML 为基础的表格用于 KF8 内容，以及将以图片为基础的表格用于 Mobi 7 内容，如下面的示例所示。亚马逊建议尽可能地使用 HTML 表格，因为某些功能在以图片形式呈现的表格中可能无法使用。请参阅第 9.5 节了解关于使用表格的详细指南。

示例：

<style>
.defaultcontent {
    display: block;
}

.mobicontent {
    display: none;
}

@media amzn-mobi {
    .defaultcontent {
        display: none;
    }
    .mobicontent {
        display: block;
    }
}
</style>
19.3.2.2 使用 display:none 属性显示 SVG 图片

KF8 支持 SVG 图片格式，但是 Mobi 7 不支持。使用 display:none 属性，您可将 SVG 图片用于 KF8 内容，并将 JPEG 图片用于 Mobi7 内容，示例如下。

<table class="defaultcontent" bordercolor="#E66C2C" border="1" cellpadding="4">
    <tr>
        <th>标题</th>
        <th>标题</th>
        <th>标题</th>
    </tr>
    <tr>
        <td>单元格</td>
        <td>
            <table bordercolor="#003399" border="1" cellpadding="4">
                <tr>
                    <td>嵌套</td>
                    <td>嵌套</td>
                </tr>
                <tr>
                    <td>嵌套</td>
                    <td>嵌套</td>
                </tr>
            </table>
        </td>
        <td>单元格</td>
    </tr>
</table>
<img class="mobicontent" src="tableimage.jpg"></img>
19.3.2.3 使用 display:none 属性的限制

Kindle 限制将 display:none 属性用于超过 10000 个字符的内容块。如果将 display:none 属性用于超过 10000 个字符的内容块，KindleGen 将返回一个错误。

※ 本文有分页： 1 ｜ 2 ｜ 3 ｜ 4 ｜ 5

© 「书伴」原创文章，转载请注明出处及原文链接：https://bookfere.com/post/611.html

“制作Kindle电子书”相关阅读

给这篇文章写一条留言

提示：带 * 标记的是必填项。您填写的邮箱地址将会被保密。首次留言将会在通过人工审核后显示。如果是提出问题，请务必提供尽可能多信息，这有助于他人更好地理解你所提出的问题。

小伙伴们写下了 2 条留言

  1. 请问kingle oasis 2017里面拷进去一本自己下载的书，点右下角的时候出现“编辑发音”的选项，进去以后就是书名和作者的拼音可以自行编辑，这是干嘛用的？

    回复

    • 确认一下，你点击的是否是“电子书”而不是“收藏夹”？貌似只有“收藏夹”有这个“编辑发音”的选项。这个功能没有特别用途，可能只是用于语音辅助。

      回复