Адаптивная вёрстка

275

21 марта 2019, 22:00

вот код:

#intouch { 
  font-family: Arial Rounded MT Bold, bold; 
  width: 17%; 
  float: left; 
  border-right: 2px solid #be0000; 
  border-bottom: 2px solid #be0000; 
  font-size: 300%; 
  color: #be0000; 
} 
 
#options { 
  background: #be0000; 
  font-size: 190%; 
  color: #ffffff; 
  width: 83%; 
  margin-left: 17%; 
  padding-top: 1.6%; 
} 
 
.option { 
  padding-left: 7%; 
}

<body> 
  <div id="intouch">На связи</div> 
  <div id="options"> 
    <span class="option">Регистрация</span> 
    <span class="option">Вход</span> 
    <span class="option">Пожертвования</span> 
    <span class="option">Контакты</span> 
  </div> 
</body>

Дело в том что на устройствах с разным разрешением это выводится криво. Как решить этот вопрос без @media?

Answer 1

Вариант с flex, точнее flex-flow: row wrap; позволит переносить контент если не будет вмещаться. При этом можно задавать ширину как в процентах (как у Вас) так и фикс, если не вместится на опр. разрешении - блоки будут перестраиваться друг под другом:

* { 
  box-sizing: border-box; 
} 
 
html, 
body { 
  padding: 0; 
  margin: 0; 
} 
 
.top { 
  display: flex; 
  flex-flow: row wrap; 
  align-items: stretch; 
} 
 
#intouch { 
  font-family: Arial Rounded MT Bold, bold; 
  width: 100px; 
  float: left; 
  border-right: 2px solid #be0000; 
  border-bottom: 2px solid #be0000; 
  color: #be0000; 
  font-size: 20px; 
   
  flex-grow:0; 
  flex-shrink:0; 
} 
 
#options { 
  background: #be0000; 
  color: #ffffff; 
  width: calc(100% - 100px); 
  padding-top: 1.6%; 
  padding-bottom: 1.6%; 
   
  display: flex; 
  flex-flow: row wrap; 
  justify-content: space-between; 
   
  flex-grow:0; 
  flex-shrink:0; 
   
  font-size: 14px; 
}

<div class="top"> 
  <div id="intouch">На связи</div> 
  <div id="options"> 
    <span class="option">Регистрация</span> 
    <span class="option">Вход</span> 
    <span class="option">Пожертвования</span> 
    <span class="option">Контакты</span> 
  </div> 
</div>

Еще если без медиазапросов (@media), то, как вариант, использовать размер шрифта в vw или vh, а то проценты как-то не особо хорошо работают:

* { 
  box-sizing: border-box; 
} 
 
#intouch { 
  font-family: Arial Rounded MT Bold, bold; 
  width: 17%; 
  float: left; 
  border-right: 2px solid #be0000; 
  border-bottom: 2px solid #be0000; 
  color: #be0000; 
  font-size: 4vw; 
} 
 
#options { 
  background: #be0000; 
  color: #ffffff; 
  width: 83%; 
  margin-left: 17%; 
  padding-top: 1.6%; 
   
  font-size: 3vw; 
} 
 
.option { 
  padding-left: 7%; 
}

<div id="intouch">На связи</div> 
<div id="options"> 
  <span class="option">Регистрация</span> 
  <span class="option">Вход</span> 
  <span class="option">Пожертвования</span> 
  <span class="option">Контакты</span> 
</div>

Answer 2

Сделайте внутренние паддинги для #intouch и #options. Если .option { display: inline-block}, то лучше писать .option:not(:last-child){padding-right: 7%} А вообще проценты действительно плохо работают, как сказали выше