Этот вопрос задается в комментарии Alex по принятому ответу.
Этот факт не означает, что vw
не может использоваться в некоторой степени для размера для этого контейнера. Теперь, чтобы увидеть какие-либо вариации, нужно учитывать, что контейнер каким-то образом является гибким по размеру. Через прямой процент width
или через 100% минус маржи. Дело становится «спорным», если контейнер всегда устанавливается, скажем, 200px
широко - то просто установить font-size
, который работает для этой ширины
Пример 1
[. g11] Однако при использовании контейнера с гибкой шириной необходимо убедиться, что в какой-то мере контейнер все еще имеет размер в окне просмотра . Таким образом, это вопрос настройки параметра vw
, основанного на том, что разница в процентах в окне просмотра, что означает учет размера родительских оберток. Возьмем этот пример :
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
So if the container is 50% of viewport (as here)
then factor that into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
*/
font-size: 2.5vw;
}
Предполагая, что div
является дочерним элементом body
, это 50%
этой ширины 100%
, которая является размер видового экрана в этом базовом случае. В принципе, вы хотите установить vw
, который будет хорошо выглядеть для вас. Как вы можете видеть в моем комментарии в приведенном выше css, вы можете «мыслить» математически по отношению к полному размеру видового экрана, но вам не нужно делать это. Текст будет «гибким» с контейнером, потому что контейнер сгибается с изменением размера видового экрана. UPDATE: вот пример двух контейнеров различного размера .
Пример 2
Вы можете помочь обеспечить размер видового экрана, заставив вычисление основываться на этом. Рассмотрим этот пример :
html {width: 100%;} /* force html to be viewport width */
body {width: 150%; } /* overflow the body */
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
Here, the body is 200% of viewport, but the container is 50%
of viewport, so both parents factor into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 3.75vw
(5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
*/
font-size: 3.75vw;
}
Калибровка по-прежнему основана на видовом экране, но по существу создана исходя из самого размера контейнера.
Если размер элемента контейнера в конечном итоге динамически изменил его процентное соотношение либо через @media
точки останова, либо через javascript, то какая бы базовая «цель» не была нужна пересчет для поддержания того же «отношения» для размера текста.
Возьмите пример № 1 выше. Если div
был переключен на ширину 25%
либо на @media
, либо на javascript, то в то же время font-size
нужно будет отрегулировать либо запрос на медиа, либо javascript для нового вычисления 5vw * .25 = 1.25
, Это поместило бы размер текста в том же размере, что и ширина «оригинала» 50%
была бы уменьшена наполовину от размера видового экрана, но теперь была уменьшена из-за изменения собственного процентного расчета.
Задача
С помощью используемой функции CSS3 calc()
было бы сложно настроить динамически, поскольку эта функция не работает для font-size
в настоящее время. Таким образом, вы не сможете выполнить чистую настройку CSS3, если ваша ширина меняется на calc()
. Конечно, незначительная корректировка ширины для полей может быть недостаточной, чтобы гарантировать любое изменение в font-size
, поэтому это может не иметь значения.
Тот, который я знаю как лучший, это FPDF . Это отличное решение с открытым исходным кодом для создания всех видов макетов PDF. Спасибо
Если вам нужны очень продвинутые функции в создании PDF, попробуйте TCPDF . Если вы хотите только минимальные возможности создания PDF-файлов и хотите иметь меньший размер, попробуйте FPDF .
Следующая ссылка содержит статью, описывающую эти две библиотеки классов генерации PDF: Легко создавать PDF с PHP
Время, но лучшие результаты .. Я использую Fpdf
У меня также был некоторый успех с html2pdf , который пытается преобразовать html в pdf документ.