Адаптивная верстка, CSS

220

16 июля 2017, 10:18

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

Answer 1

Для этого используйте медиа-запросы CSS. В примере лишь одна из возможностей использования медиа-запросов. Например такая конструкция @media (max-width: 575px) {} будет применять свойства к селекторам, когда ширина клиентской области будет не больше 575px. А такая конструкция @media (min-width: 768px) and (max-width: 991px) {} будет применять свойства к селекторам, когда ширина клиентской области будет не больше 991px и не меньше 768px.

.col{ 
  display: inline-block; 
  height: 100px; 
  border: 1px solid #444; 
} 
 
@media (max-width: 575px) { 
  .col{ 
     width: 100%;    
  } 
} 
 
@media (min-width: 576px) and (max-width: 767px) { 
  .col{ 
     width: 49%;    
  } 
} 
 
@media (min-width: 768px) and (max-width: 991px) { 
	.col{ 
     width: 32%;    
  } 
} 
 
@media (min-width: 992px) { 
  .col{ 
     width: 15%;    
  } 
}

<!DOCTYPE html> 
<html> 
<head> 
 
	<meta charset="UTF-8"> 
	<title>Использование медиа-запросов</title> 
 
</head> 
<body> 
 
  <div class="col">col 1</div> 
  <div class="col">col 2</div> 
  <div class="col">col 3</div> 
  <div class="col">col 4</div> 
  <div class="col">col 5</div> 
  <div class="col">col 6</div> 
 
</body> 
</html>