<html>
  <head>
    <title>CSS length</title>
  </head>
  <body>
    <div class="page">
      <div class="example-item example-item--1"> 
        <p class="example-item__text">Ширина блока в <code>400 px</code></p>
        <div class="example-item__content">
          <div class="example-item__block example-item__block--px"></div>
        </div>
      </div>
      <div class="example-item example-item--2"> 
        <p class="example-item__text">Ширина блока в <code>65 vh</code></p>
        <div class="example-item__content">
          <div class="example-item__block example-item__block--vh"></div>
        </div>
      </div>
      <div class="example-item example-item--3"> 
        <p class="example-item__text">Ширина блока в <code>75 vw</code></p>
        <div class="example-item__content">
          <div class="example-item__block example-item__block--vw"></div>
        </div>
      </div>
      <div class="example-item example-item--4"> 
        <p class="example-item__text">Ширина блока в <code>86 vmin</code></p>
        <div class="example-item__content">
          <div class="example-item__block example-item__block--vmin"></div>
        </div>
      </div>
      <div class="example-item example-item--5"> 
        <p class="example-item__text">Ширина блока в <code>60 vmax</code></p>
        <div class="example-item__content">
          <div class="example-item__block example-item__block--vmax"></div>
        </div>
      </div>
      <div class="page__copyright">
         Пример использования различных <a class="page__copyright-link" href="https://tuhub.ru/refs/css/length" target="blank">единиц измерения в CSS</a>
      </div>
    </div>
  </body>
</html>
.example-item__block {
  min-width: 500px;
}

.example-item__block {
  height: 30px;
  background-color: #333;
  border-radius: 3px;
}

.example-item__block--px {
  width: 400px;
}

.example-item__block--vh {
  width: 65vh;
}

.example-item__block--vw {
  width: 75vw;
}

.example-item__block--vmin {
  width: 86vmin;
}

.example-item__block--vmax {
  width: 60vmax;
}

External CSS

  1. https://tuhub.ru/themes/custom/tuhub/dist/css/codepen.css

External JavaScript

This Pen doesn't use any external JavaScript resources.