Question

我正在阅读epub3规范并试图了解media queries可以与fixed layout documents结合使用的内容。

我希望能够创建为特定设备指定<meta name="viewport"的固定布局页面，并根据设备的屏幕尺寸选择读取顺序和ToC中实际包含的设备特定页面。

最好的方法似乎是使用nav xhtml中<li>元素的'hidden'属性，但就我所见，这不能被css改变。

我还尝试了css visibility和display属性，但这些属性显然是为了改变当前渲染，而不是添加或删除实际渲染独立内容 - 而epub3规范（以及html spec）建议hidden用于我想做的事情。

否则，我们将非常感谢您根据设备屏幕尺寸显示不同的固定布局页面的任何想法！

Answer 1

看起来你正试图以某种方式违反了固定布局的概念，它假定了一个特定的屏幕地理位置。据我所知，您将需要为不同的设备尺寸创建不同的书籍。

您可以对屏幕尺寸进行媒体查询，但根据我的知识，无法使用这些来控制脊椎中存在的内容。正如您所理解的那样，CSS visibility属性是关于在页面上隐藏HTML元素，而不是脊椎元素。无法通过CSS控制TOC中的hidden属性。

你可以尝试

@media (max-device-width: 640px) {
    body.omit-if-narrow { display: none; }
}

但我很确定会给你一个空白页面。

Answer 2

您正在寻找的是“渲染映射”的概念，而不是媒体查询。它能够根据同一出版物中的设备特征（以及其他标准）选择完全不同的再现（布局，包括阅读顺序）。

它不在当前的EPUB 3.0规范中，但它被特许成为未来的新增功能。请参阅the rendition mapping charter，特别是Rendition Selection and Mapping上的部分。