Как использовать CSS для масштабирования шрифта в области просмотра при сохранении двухколоночного макета? - PullRequest
Новая
       41

Как использовать CSS для масштабирования шрифта в области просмотра при сохранении двухколоночного макета?

2 голосов
/ 24 апреля 2019

У меня есть HTML и CSS-код, подобный этому:

HTML: 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="example.css"/>
</head>

<body>
    <div id="main">
        <span class="alignleft">First event, including a few words of description</span>
        <span class="alignright">Date of first event</span>
    </div>
</body>
</html>

CSS: 

html {
    overflow-y: scroll;
    max-width: 800px;
    margin: auto;
}

body {
    background-color: #fff;
    color: #000;
    font-family: sans-serif;
    padding: 0;
    margin: 0;
}

#main {
    margin: 0;
    max-width: 50em;
    padding: 1.5em;
}

span.alignleft {
    float: left;
    width:80%;
    text-align:left;
}

span.alignright {
    float: left;
    width:20%;
    text-align:right;
}

В большом окне / окне просмотра это производит текств макете с двумя столбцами, как это (что я хочу):

Text that isn't wrapped

В меньшем окне / окне просмотра, например, в мобильном браузере, этосоздает такой текст:

Wrapped text

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

Однако, если я добавлю font-size:2vw элементов в CSS,например, 

html {
  overflow-y: scroll;
  max-width: 800px;
  margin: auto;
}

body {
  background-color: #fff;
  color: #000;
  font-family: sans-serif;
  padding: 0;
  margin: 0;
}

#main {
  margin: 0;
  max-width: 50em;
  padding: 1.5em;
}

span.alignleft {
  float: left;
  width: 80%;
  text-align: left;
  font-size: 8vw;
}

span.alignright {
  float: left;
  width: 20%;
  text-align: right;
  font-size: 2vw;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Title</title>
  <link rel="stylesheet" type="text/css" href="example.css" />
</head>

<body>
  <div id="main">
    <span class="alignleft">First event, including a few words of description</span>
    <span class="alignright">Date of first event</span>
  </div>
</body>

</html>

Это убивает макет с двумя столбцами и остальную часть форматирования.Как мне это исправить?

Ответы [ 2 ]

3 голосов
/ 24 апреля 2019

Вы можете использовать единицу fw для font-size, как и раньше, но вы просто должны использовать меньшие значения. Начните с font-size: 0.5vw и медленно меняйте значение, пытаясь получить разные значения, чтобы получить желаемый результат.

Имейте в виду: один vw составляет один процент от ширины экрана, поэтому для экрана шириной 1000 пикселей 8vw означает размер шрифта 80 пикселей!

2 голосов
/ 24 апреля 2019

Вы можете добавить желаемое font-size:2vw для масштабирования с окном просмотра вместе с парой других правил:

  • Настройка оболочки и интервалов для отображения в виде таблицы и ячеек
  • Настройка white-space на участках nowrap

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

html {
  overflow-y: scroll;
  max-width: 800px;
  margin: auto;
}

body {
  background-color: #fff;
  color: #000;
  font-family: sans-serif;
  padding: 0;
  margin: 0;
}

#main {
  margin: 0;
  max-width: 50em;
  padding: 1.5em;
  display: table;
  width: 100%;
  box-sizing: border-box;
}

#main>div.row {
  display: table-row;
}

span.alignleft {
  text-align: left;
}

span.alignright {
  text-align: right;
}

span.alignleft,
span.alignright {
  white-space: nowrap;
  display: table-cell;
  padding: 0 5px;
}

@media only screen and (max-width: 768px) {
  #main {
    padding: .5em;
  }
  span.alignleft,
  span.alignright {
    white-space: nowrap;
    display: table-cell;
    font-size: calc(6px + 1.5vw);
  }
}
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Title</title>
  <link rel="stylesheet" type="text/css" href="example.css" />
</head>

<body>
  <div id="main">
    <div class="row">
      <span class="alignleft">First event, including a few words of description</span>
      <span class="alignright">Date of first event</span>
    </div>
    <div class="row">
      <span class="alignleft">First event, including a few words of description</span>
      <span class="alignright">Date of first event</span>
    </div>
  </div>
</body>

</html>
...