Можно ли использовать Media Queries для выбора страниц с фиксированным макетом?

Question

Я читаю спецификацию epub3 и пытаюсь получить ручку на то, что media queries может использоваться в сочетании с fixed layout documents.

Я хотел бы иметь возможность создавать страницы фиксированного макета с <meta name="viewport", указанными для определенных устройств, и выбирать, какие страницы на конкретном устройстве фактически включены в порядок чтения и ToC на основе размеров экрана устройства.

Лучшим маршрутом к этому, кажется, является использование атрибута 'hidden' на элементе <li> в nav xhtml, но это невозможно изменить css, насколько я могу видеть.

Я также попытался CSS visibility и display атрибутов, но они явно предназначены для изменения текущего рендеринга, а не добавлять или удалять фактический рендеринг-независим содержание - в то время как EPUB3 спецификация (а также HTML спецификация) предполагает, что hidden предназначен именно для того, что я хочу делать.

В противном случае любые идеи по отображению другой страницы фиксированного макета, основанной на размерах экрана устройства, будут с благодарностью получены!

Answer 1

Что вы ищете, так это понятие «сопоставление выдачи», а не медиа-запрос. Это возможность выбирать совершенно разные исполнения (макеты, включая порядок чтения) на основе характеристик устройства (среди других критериев) в пределах одной публикации.

Это не в текущей спецификации EPUB 3.0, но она зафрахтована как будущее дополнение. См. the rendition mapping charter, в частности раздел, посвященный Rendition Selection and Mapping.

Answer 2

Похоже, что вы пытаетесь каким-то образом нарушить понятие фиксированного макета, которое предполагает определенную географию экрана. Насколько я могу судить, вам нужно будет создавать разные книги для разных размеров устройств.

Вы можете делать медиа-запросы для размеров экрана, но не можете использовать их для управления тем, что присутствует в позвоночнике, насколько мне известно. Поскольку вы правильно интуитивно поняли, свойство CSS visibility связано с тем, что HTML-элементы скрываются на странице, а не в элементах спинного хребта. Атрибут hidden в TOC нельзя контролировать с помощью CSS.

Вы можете попробовать

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

, но я уверен, что даст вам пустую страницу.