Отзывчивый текстовый отступ - PullRequest
Новая
       8

Отзывчивый текстовый отступ

1 голос
/ 11 февраля 2020

У меня есть небольшое меню, и я хочу, чтобы заполнение по указанной ссылке c было отзывчивым. Как я могу это сделать? Часть CSS на самом деле S CSS, но я думаю, что вы можете понять, что мне следует изменить, чтобы решить проблему. Я пытался использовать проценты вместо rem, но код сломался. 

header nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 10vh;
}

header nav .logo {
  -webkit-box-flex: 4;
      -ms-flex: 4 1 25rem;
          flex: 4 1 25rem;
}

header nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 40rem;
          flex: 1 1 40rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

header nav ul li a {
  font-size: calc(
 12px + (16 - 12) * ((100vw - 300px) / (1600 - 300)));
  /* Make font-size fluid, from 64px max. to 36px min. */
  font-family: "Montserrat", sans-serif;
  font-weight: 200;
  color: #667696;
}

header nav .signUp a {
  color: #1063dc;
  font-weight: 400;
  padding: 1.2rem 4.1rem;
  border-style: solid;
  border-color: #1063dc;
  border-width: 0.2rem;
  border-radius: 1rem;
}
<header class="mainHead">
        <nav>
          <div class="logo">
            <a href="#"><img src="/img/logo.svg" alt="Logo Image"/></a>
          </div>
          <ul>
            <li><a href="#">Product</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">Support</a></li>
            <li class="signUp"><a href="#">Sign Up</a></li>
          </ul>
        </nav>
      </header>

Спасибо!

Ответы [ 4 ]

0 голосов
/ 11 февраля 2020 

header nav {
    display: flex;
    flex-direction: row;
    min-height: 10vh;
    align-items: center;
  }
  
  header nav .logo {
    flex: 5vw;
    margin: auto;
  }
  
  header nav ul {
    display: flex;
    flex: 1 1 40rem;
    justify-content: space-between;
    margin: auto;
  }

  header nav ul li {
    list-style: none;
  }
  
  header nav ul li a {
    font-size: calc(
   12px + (16 - 12) * ((100vw - 300px) / (1600 - 300)));
    /* Make font-size fluid, from 64px max. to 36px min. */
    font-family: "Montserrat", sans-serif;
    font-weight: 200;
    color: #667696;
  }
  
  header nav .signUp a {
    color: #1063dc;
    font-weight: 400;
    padding: 1rem 4vw;
    border-style: solid;
    border-color: #1063dc;
    border-width: 0.2rem;
    border-radius: 1rem;
  }
<header class="mainHead">
        <nav>
          <div class="logo">
            <a href="#"><img src="/img/logo.svg" alt="Logo Image"/></a>
          </div>
          <ul>
            <li><a href="#">Product</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">Support</a></li>
            <li class="signUp"><a href="#">Sign Up</a></li>
          </ul>
        </nav>
      </header>

Я бы удалил расширения WebKit CSS, так как гибкий макет поддерживается практически всеми браузерами. Просто чтобы сохранить код чище:

https://caniuse.com/#feat = flexbox

0 голосов
/ 11 февраля 2020

... Или просто с помощью псевдо-селектора при наведении в CSS. Существуют способы нацеливания на стиль объектов / элементов, используя JS, если вам нужно усложнить. Но это будет динамически добавлять отступы в соответствии с вашим вопросом. для подхода JS к выбору стиля элементов используйте это:

let element = document.getElementById("myElement"); element.style.padding = '5px';

ниже - это быстрый способ добавить динамическое заполнение c (или динамическое c что угодно) в CSS: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <style>
            li:hover {
                padding-bottom: 15px;
            }
        </style>
    </head>

    <body>
        <header class="mainHead">
            <nav>
            <div class="logo">
                <a href="#"><img src="https://www.hollywoodreporter.com/live-feed/simpsons-feature-live-segment-homer-866370" alt="Logo Image"/></a>
            </div>
            <ul>
                <li><a href="#">Product</a></li>
                <li><a href="#">Features</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Support</a></li>
                <li>class="signUp"><a href="#">Sign Up</a></li>
            </ul>
            </nav>
        </header>
    </body>

</html>

Если вам это нужно в зависимости от размера экрана / устройства, вам нужно узнать о медиазапросах в CSS. это позволит вам кодировать разные CSS для разных устройств.

0 голосов
/ 11 февраля 2020

Я делаю свой комментарий:

, если у вас есть размер шрифта, почему вы используете единицы измерения rem для заполнения, когда их будет делать em?

ответ для обратной связи;)

em заполнение вместо rem, так как размер шрифта calc(12px + (16 - 12) * ((100vw - 300px) / (1600 - 300)));

header nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 10vh;
}

header nav .logo {
  -webkit-box-flex: 4;
      -ms-flex: 4 1 25rem;
          flex: 4 1 25rem;
}

header nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 40rem;
          flex: 1 1 40rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

header nav ul li a {
  font-size: calc(
 12px + (16 - 12) * ((100vw - 300px) / (1600 - 300)));
  /* Make font-size fluid, from 64px max. to 36px min. */
  font-family: "Montserrat", sans-serif;
  font-weight: 200;
  color: #667696;
}

header nav .signUp a {
  color: #1063dc;
  font-weight: 400;
  padding: 1.2em 4.1em;
  border-style: solid;
  border-color: #1063dc;
  border-width: 0.2rem;
  border-radius: 1rem;
}
<header class="mainHead">
        <nav>
          <div class="logo">
            <a href="#"><img src="/img/logo.svg" alt="Logo Image"/></a>
          </div>
          <ul>
            <li><a href="#">Product</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">Support</a></li>
            <li class="signUp"><a href="#">Sign Up</a></li>
          </ul>
        </nav>
      </header>
0 голосов
/ 11 февраля 2020

Как насчет установки для vw 

header nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 10vh;
}

header nav .logo {
  -webkit-box-flex: 4;
      -ms-flex: 4 1 25rem;
          flex: 4 1 25rem;
}

header nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 40rem;
          flex: 1 1 40rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

header nav ul li a {
  font-size: calc(
 12px + (16 - 12) * ((100vw - 300px) / (1600 - 300)));
  /* Make font-size fluid, from 64px max. to 36px min. */
  font-family: "Montserrat", sans-serif;
  font-weight: 200;
  color: #667696;
}

header nav .signUp a {
  color: #1063dc;
  font-weight: 400;
  padding: 1.2vw 4.1vw;
  border-style: solid;
  border-color: #1063dc;
  border-width: 0.2rem;
  border-radius: 1rem;
}
<header class="mainHead">
        <nav>
          <div class="logo">
            <a href="#"><img src="/img/logo.svg" alt="Logo Image"/></a>
          </div>
          <ul>
            <li><a href="#">Product</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">Support</a></li>
            <li class="signUp"><a href="#">Sign Up</a></li>
          </ul>
        </nav>
      </header>
...