body.css
bod{width:100%;}

<html>
<title>nada</title>
<head>﻿ 
<meta name="viewport" content="width=device-width">

<style>

*{padding:0px; margin:0px}
/* Resluções */
@media (min-width: 240px) {
  .box{width: auto; background:#333; height:100px}
}

@media (min-width: 270px) {
  .box{width: auto; background:#6C0; height:100px}
}

@media (min-width: 480px) {
  .box{width: auto; background:##90F; height:100px}
}

@media (min-width: 768px) {
  .box{width: auto; background:#F00; height:100px}
}

@media (min-width: 1024px) {
  .box{width: auto; background:#C00; height:100px}
}


</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
  
  /* Grid */
  .container {
    width: var(--containerSize);
    display: block;
    margin: 0 auto;
  }
  .container-fluid {
    width: 100%;
    display: block;
  }
  .container:after {
    content: "";
    display: table;
    clear: both;
  }
  
  .col {
    float: left;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  
  .col-12 {
    width: 100%;
  }
  
  .col-6 {
    width: 50%;
  }
  
  .col-1 {
    width: 8.33333%;
  }
  
  
  /* Visual */
  * {
    text-align: center;
  }
  
  .item {
    background: #ddd;
    border: 1px solid rgb(0, 0, 0);
    padding: 15px;
  }
  span:before {
    content: var(--screenSize);
  }