Разница между vh vw и % ,что лучше?

188

16 января 2019, 14:40

Разница между vh vw и % ,видел в интернете ,но не уловил сути,что лучше использовать vw или % для размеров и лучше для чего именно его использовать,для каких тегов или блоков?

Answer 1

% используется в соотношении к родителю. Vw/vh независимо от родителя всегда на всю ширину/высоту экрана. Пример:

.block{ 
  width: 300px; 
  height: 200px; 
  background-color: #000; 
} 
.block__item{ 
  height: 100px; 
   
} 
.block__item_percent{ 
  width: 100%; 
  background-color: red; 
} 
.block__item_vw{ 
  width: 100vw; 
  background-color: #000; 
}

<div class="block"> 
  <div class="block__item block__item_percent"> 
     
  </div> 
  <div class="block__item block__item_vw"> 
     
  </div> 
</div>