Адаптивный размер текста с использованием w3.css - PullRequest
Новая
       22

Адаптивный размер текста с использованием w3.css

0 голосов
/ 27 мая 2018

Я пытаюсь сделать свой сайт более отзывчивым, используя w3.css (я знаю, что это не всем нравится, но это проще, чем пытаться заставить мой собственный CSS работать для каждого браузера и устройства).

Есть ли элегантный способ уменьшить размер текста на маленьких экранах с помощью w3.css?У меня есть заголовок с использованием одной строки таблицы, 5 столбцов, все размеры h3.На маленьком экране я бы хотел, чтобы это было h4 или h5, чтобы все подходило.

Я не хочу использовать vw, иначе он будет слишком большим на больших экранах.Я мог бы продублировать контент и использовать w3-hide-small для одного и скрыть другую версию на средних и больших экранах, но это не похоже на хорошую практику.Или я должен использовать медиа-запросы или есть способ в w3.css?

<table class="w3-container w3-table">
 <tr>
  <td>
  <h2 id="date1"><b>title1</b></h3>
  </td>
  <td class="w3-black w3-center">
  <h3>title2</h3>
  </td>
  <td class="w3-center">
  <h3>title3</h3>
  </td>
  <td class="w3-center">
  <h3>title4</h3>
  </td>
  <td class="w3-center">
  <h3>title5</h3>
  </td>
 </tr>
</table>

Ответы [ 3 ]

0 голосов
/ 27 мая 2018

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

0 голосов
/ 27 мая 2018

Есть 2 вещи, которые вы можете сделать;не используйте w3.css, но работайте нормально;один из которых использует vw как единицу, но должен работать

Вариант 1

, который вы можете использовать @media screen and (min-width: any_size){}.Который работает так: 

/* if the screen is wider than 500px set the font size to 80px */
@media screen and (min-width: 500px) {
  .dynamicallyScale {
    font-size: 80px;
  }
}
/*if the screen size is less than 499px set the font size to 80px */
@media screen and (max-width: 499px) {
  .dynamicallyScale {
    font-size: 30px;
  }
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<table class="w3-container w3-table">
 <tr>
  <td>
  <h2 id="date1" class="dynamicallyScale"><b>title1</b></h3>
  </td>
  <td class="w3-black w3-center">
  <h3 class="dynamicallyScale">title2</h3>
  </td>
  <td class="w3-center">
  <h3 class="dynamicallyScale">title3</h3>
  </td>
  <td class="w3-center">
  <h3 class="dynamicallyScale">title4</h3>
  </td>
  <td class="w3-center">
  <h3 class="dynamicallyScale">title5</h3>
  </td>
 </tr>
</table>

Излишне говорить, что вы также можете использовать любой другой способ определения размера, например em и % Однако это изменение действительно неожиданно и будеттребует много, и я имею в виду, что многие операторы min-width: и max-width: выглядят гладко, поэтому, вероятно, для работы потребуется целый отдельный файл CSS, и, в общем, это просто плохая практика кодирования.

Вариант 2

Вы можете использовать устройство vw.Это динамически масштабирует размер текста в зависимости от размера ширины области просмотра (это то, что означает vw).так что вы можете сделать что-то вроде этого: 

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<table class="w3-container w3-table">
 <tr>
  <td>
  <h2 id="date1" style="font-size:8vw;"><b>title1</b></h3>
  </td>
  <td class="w3-black w3-center">
  <h3 style="font-size:6vw;">title2</h3>
  </td>
  <td class="w3-center">
  <h3 style="font-size:4vw;">title3</h3>
  </td>
  <td class="w3-center">
  <h3 style="font-size:2vw;">title4</h3>
  </td>
  <td class="w3-center">
  <h3 style="font-size:1vw;">title5</h3>
  </td>
 </tr>
</table>

Конечно, вы можете использовать другие размеры, чем в моем примере, но вы должны увидеть, что при изменении размера окна размер текста динамически изменяется.Хотя это не использует w3.css, это лучшее из возможных решений.

0 голосов
/ 27 мая 2018

Вы можете использовать платформу Bootstrap для отзывчивости, потому что она более популярна и богата.

для адаптивного текста вы можете использовать медиазапрос или использовать единицы измерения вместо пикселей.
вы можете найти некоторую полезную информацию о единицах CSS в этой ссылке:

https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

также вы можете получить загрузочный фреймворк отсюда:
http://getbootstrap.com/

и вот пояснение по поводу типографии:
https://getbootstrap.com/docs/4.1/content/typography/

...