@novicell/css-utils/dist/src/sizing.css

A CSS utility class package inspired by Bootstrap 4 CSS utilities and configurable via CSS Custom Properties and PostCSS.

/*
// Width and height
*/

.w-25 {
      width: 25%;
    }

.h-25 {
      height: 25%;
    }

.w-50 {
      width: 50%;
    }

.h-50 {
      height: 50%;
    }

.w-75 {
      width: 75%;
    }

.h-75 {
      height: 75%;
    }

.w-100 {
      width: 100%;
    }

.h-100 {
      height: 100%;
    }

/* Repsonsive */
@media (--viewport-ms-min) {
        .w-ms-25 {
          width: 25%;
        }
        .h-ms-25 {
          height: 25%;
        }
        .w-ms-50 {
          width: 50%;
        }
        .h-ms-50 {
          height: 50%;
        }
        .w-ms-75 {
          width: 75%;
        }
        .h-ms-75 {
          height: 75%;
        }
        .w-ms-100 {
          width: 100%;
        }
        .h-ms-100 {
          height: 100%;
        }
  }
@media (--viewport-sm-min) {
        .w-sm-25 {
          width: 25%;
        }
        .h-sm-25 {
          height: 25%;
        }
        .w-sm-50 {
          width: 50%;
        }
        .h-sm-50 {
          height: 50%;
        }
        .w-sm-75 {
          width: 75%;
        }
        .h-sm-75 {
          height: 75%;
        }
        .w-sm-100 {
          width: 100%;
        }
        .h-sm-100 {
          height: 100%;
        }
  }
@media (--viewport-md-min) {
        .w-md-25 {
          width: 25%;
        }
        .h-md-25 {
          height: 25%;
        }
        .w-md-50 {
          width: 50%;
        }
        .h-md-50 {
          height: 50%;
        }
        .w-md-75 {
          width: 75%;
        }
        .h-md-75 {
          height: 75%;
        }
        .w-md-100 {
          width: 100%;
        }
        .h-md-100 {
          height: 100%;
        }
  }
@media (--viewport-lg-min) {
        .w-lg-25 {
          width: 25%;
        }
        .h-lg-25 {
          height: 25%;
        }
        .w-lg-50 {
          width: 50%;
        }
        .h-lg-50 {
          height: 50%;
        }
        .w-lg-75 {
          width: 75%;
        }
        .h-lg-75 {
          height: 75%;
        }
        .w-lg-100 {
          width: 100%;
        }
        .h-lg-100 {
          height: 100%;
        }
  }
@media (--viewport-xl-min) {
        .w-xl-25 {
          width: 25%;
        }
        .h-xl-25 {
          height: 25%;
        }
        .w-xl-50 {
          width: 50%;
        }
        .h-xl-50 {
          height: 50%;
        }
        .w-xl-75 {
          width: 75%;
        }
        .h-xl-75 {
          height: 75%;
        }
        .w-xl-100 {
          width: 100%;
        }
        .h-xl-100 {
          height: 100%;
        }
  }

.mw-100 { max-width: 100%; }


.mh-100 { max-height: 100%; }

/* Viewport additional helpers */
.min-vw-100 { min-width: 100vw; }

.min-vh-100 { min-height: 100vh; }

.vw-100 { width: 100vw; }

.vh-100 { height: 100vh; }