Нужно ли корректировать верстку так, чтобы при масштабировании нигде ничего не выпирало?

08 апреля 2022, 11:40

Нужно ли вообще корректировать верстку так, чтоб при масштабировании нигде ничего не выпирало и тд? Вот как выглядит отверстанная часть на 100%:

Вот тоже отверстанная часть, но с двойным масштабом (200%):

Как вы видите, заголовок заплыл под квадрат.

Скажите, это вообще важно? Или это ерунда? А то мне не хватает фундаментальных знаний в этой сфере...

Answer 1

нужно ли вообще корректировать верстку так, чтоб при масштабировании нигде ничего не выпирало и тд?

Отвечаю на ваш вопрос. Если вы хотите, чтобы все пользователи видели качественно выполненную вами работу и ваш сайт можно было просматривать на самых разных устройствах, независимо от разрешения и формата экрана, будь то пк, ноутбук, планшет, смартфон или любое другое устройство, то, наверное, нужно. Адаптивный дизайн является одним из главных показателей качества вашего сайта, обеспечивающий отличное его восприятие на различных устройствах, так как в настоящее время существует множество таких устройств, которыми люди пользуются. Все эти устройства различаются размером экрана, разрешением и, соответственно, тем, как может отображаться на этих устройствах ваш сайт. Поэтому очень важно, чтобы ваш сайт хорошо смотрелся и правильно отображался, как это вами было задумано при его создании, у любого из пользователей, независимо от того, какое устройство он использует.

А вот так всё адаптивно. Повторюсь:

* { 
  margin: 0; 
  padding: 0; 
} 
 
.wrapper { 
  position: relative; 
  overflow: hidden; 
  width: 100%; 
} 
 
.wrp { 
  position: relative; 
  display: inline-block; 
  float: left; 
  width: 50%; 
  text-align: center; 
} 
 
img { 
  display: block; 
  max-width: 100%; 
} 
 
.kwad { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  margin-top: -40px; 
  margin-left: -40px; 
  width: 80px; 
  height: 80px; 
  background-color: chocolate; 
  text-align: center; 
  line-height: 60px; 
  font-size: 20px; 
} 
 
.kwad span { 
  display: block; 
  font-size: 10px; 
  line-height: 10px; 
  margin-top: -10px; 
} 
h1 { 
font-size: 5vw; 
padding: 30px; 
color: gray; 
}

<div class="wrapper"> 
  <div class="wrp"><img src="https://mtdata.ru/u22/photoDCC4/20414722554-0/original.jpg"></div> 
  <div class="wrp"><h1>Пушкин</h1></div> 
  <div class="kwad">01<br><span>Пушкин</span></div> 
</div> 
<div class="wrapper"> 
  <div class="wrp"><h1>Пушкин Здесь много много очень много Пушкина</h1></div> 
  <div class="wrp"><img src="https://cdn.cadelta.ru/media/articles/id5431/cover.jpg"></div> 
  <div class="kwad">01<br><span>Пушкин</span></div> 
</div>

Answer 2

Ладно показываю - можете проверять на мобилах и где угодно

html, 
body { 
  margin: 0; 
} 
 
.items { 
  display: flex; 
} 
 
.item { 
  text-align: center; 
  width: 100%; 
  display: flex; 
  align-items: center; 
  flex-direction: column; 
  justify-content: center; 
} 
 
img { 
  display: block; 
  width: 100%; 
} 
 
.marker { 
  position: relative; 
} 
 
.unit { 
  position: absolute; 
  top: calc(50% - 25px); 
  left: calc(100% - 25px); 
  width: 50px; 
  height: 50px; 
  background: tomato; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  color: #fff; 
} 
 
.reverse { 
  flex-direction: row-reverse; 
} 
 
.reverse .unit { 
  position: absolute; 
  top: calc(50% - 25px); 
  left: calc(0% - 25px); 
  width: 50px; 
  height: 50px; 
  background: tomato; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
 
@media (max-width: 562px) { 
  .unit { 
    width: 40px; 
    height: 40px; 
  } 
  .item h3 { 
    font-size: 20px; 
    margin: 0; 
  } 
  .item p { 
    font-size: 14px; 
  } 
} 
 
@media (max-width: 396px) { 
  .unit { 
    width: 30px; 
    height: 30px; 
    top: calc(50% - 15px); 
    left: calc(100% - 15px); 
  } 
  .item h3 { 
    font-size: 18px; 
    margin: 0; 
  } 
  .item p { 
    font-size: 12px; 
  } 
}

<div class="items"> 
  <div class="item marker"> 
    <img src="http://placehold.it/300" alt=""> 
    <div class="unit">1</div> 
  </div> 
  <div class="item"> 
    <h3>lorem ipsum</h3> 
    <p> 
      Lorem ipsum dolor sit amet,<br> consectetur adipisicing elit. <br> Laboriosam ex totam <br> doloremque eos. 
    </p> 
  </div> 
</div> 
 
<div class="items reverse"> 
  <div class="item marker"> 
    <img src="http://placehold.it/300" alt=""> 
    <div class="unit">2</div> 
  </div> 
  <div class="item"> 
    <h3>lorem ipsum</h3> 
    <p> 
      Lorem ipsum dolor sit amet,<br> consectetur adipisicing elit. <br> Laboriosam ex totam <br> doloremque eos. 
    </p> 
  </div> 
  <div>