Подходящая страница к любому разрешению экрана

Я создаю шаблон печати для своего веб-сайта, все в порядке, но у меня проблема, разрешение экрана - 1600x900, поэтому я создаю страницу для этой резолюции, я говорю о высоте, потому что моя страница создана с Bootstrap так он реагирует, звучит немного странно, но позвольте мне объяснить, страница в моем экране выглядит следующим образом:Подходящая страница к любому разрешению экрана

Все это, если для «предварительного просмотра печати (Ctrl + P)»

Header 
Some text 
Some text 
Some text 
Some text 
Body 
Some text 
Some text 
Some text 
Some text 
Footer 
Some text 
Some text 
Some text 
Some text

Но когда я пробовал с другими резолюциями, выглядел так:

Header 
Some text 
Some text 
Some text 
Some text 
Body 
Some text 
Some text 
Some text 

Page 2 
Some text 
Footer 
Some text 
Some text 
Some text 
Some text

Мой вопрос здесь, если существует способ подгонки страницы к одной высоте для любого разрешения, другими словами, показать страницу точно, как она выглядит на моем экране.

Это то, что я пробовал:

p { 
     font-size: 12px; 
     line-height: 1; 
    } 

    @page { 
     size: A4 landscape; 
     margin-left: 18mm; 
     margin-top: 0.2mm; 
    }

С, что иногда работает, я не ожидаю, что вы код для меня, но я ожидаю, некоторые подсказки, чтобы решить эту проблему, заранее спасибо и мои извинения, если это не может быть понято

источник

2016-08-29 Francisco Fernandez

Просмотрите, как создать [таблицы стилей печати] (http://www.webcredible.com/blog/print-stylesheet-definitive-guide/). В Интернете есть много сайтов, которые объясняют, как это сделать. В принципе, вам нужно будет сделать больше работы, чем просто установить размер страницы и поля. –

Я подумываю об изменении размера шрифта, полей, размера страницы и всего моего контента, чтобы соответствовать ей самым распространенным разрешениям. –

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

Веб-страницы не должны выглядеть одинаково на каждом устройстве. Как только вы усвоите это, вы станете лучшим веб-дизайнером.

Все, что сказано, вы можете использовать единицы просмотра, чтобы гарантировать, что этот элемент остается в размере пропорционально любому размеру экрана, но это не будет решением одного размера, и я не верю это работает при печати.

Например:

.container{ height: 100vh width: 100vw; }

Вы также можете использовать медиа-запросы, чтобы сказать, как браузер должен печати ваши веб-страницы, которые являются хорошим способом, чтобы обеспечить печать страницы, как вы хотите его к. Например, вместо @media screen and (min-width: 30em){…} вы можете написать @media print and (min-width: 30em){}.

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

источник

2016-08-29 16:20:54 Ragdoll

Я понимаю, что вы имели в виду, и я думаю, что мой вопрос не очень ясен, страница выглядит нормально в любом разрешении потому что реагирует (я использую Bootstrap), когда я набираю ctrl + p. Я нацеливаюсь на определенный div, и на моем экране я могу распечатать этот div на одной странице, но когда я делаю то же самое в другом разрешении экрана, я печатаю этот div в 2 страницы или более, что проблема, которую я хочу знать, если ее можно что-то подстраивать под любое разрешение. –

Я отредактировал, чтобы добавить информацию о запросах на печать, что может быть тем, что вы ищете. – Ragdoll

Подходящая страница к любому разрешению экрана

ответ

Смежные вопросы