HTML/CSS 响应式设计

Question

I created a page with some buttons. All design is correct as is all positioning.

The problem of all is that it is not responsive.

I used some attributes like top, left and I think it hurt me in responsive design, but I may be wrong.

I wish that when reducing the window, the buttons would move (responsive design) automatically

Can anyone help me get everything responsive and in place?

CodePen

#inline-container img { 
    position: absolute; 
    display: block; 
    margin: 0px; 
    border: none; 
    padding: 0px; 
}

#inline-container div { 
    position: absolute; 
}

#inline-container { 
    display: block; 
    position: relative; 
    width: 1920px; 
    height: 1080px; 
    overflow: hidden;  }

#_bg__home___quadrado___6_colunas {
    top: 0px;
    left: 0px;
    width: 1920px;
    height: 1080px;
    background:rgba(255,255,255,255);
}

.search_box {
    top:16px;
    left: 1384px;
    width: 216px;
    height: 32px;
    background-color: #edf3f9;
    opacity: 0.8; 
    border: none;
    border-radius: 16px;
    line-height: 20px;
    color: black;
    text-indent: 40px;
    position: relative;
 }

.Upload {
    top: 16px;
    left: 76px;
    width: 135px;
    height: 32px;
}

.It {
    top: 24px;
    left: 728px;
    width: 88px;
    height: 24px;
}

.Ta {
    top: 24px;
    left: 944px;
    width: 92px;
    height: 24px;
}

.No {
    top: 24px;
    left: 1052px;
    width: 141px;
    height: 24px;
}

.Ca {
    top: 24px;
    left: 832px;
    width: 96px;
    height: 24px;
}

.btn-c{
    opacity: 1;
      top: 24px; 
    left: 832px;
      width: 96px;
      height: 24px;
    text-align: center;
  font: Bold 13px/20px Noto Sans;
  letter-spacing: 0;
     color: #4D4F5C;
       -ms-border-radius: 16px;
      -o-border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
    border-width: 0px;
    background: rgb(250, 250, 251);
    outline:none;
    cursor: pointer;

      }
          .btn-c:active{
              width: 96px;
          height: 24px;
      -ms-border-radius: 16px;
      -o-border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
    border-width: 0px;
    background: rgba(202,206,213,255);
          opacity: 1;
  }

  .btn-n{
    opacity: 1;
        top: 24px;
       left: 1052px;
      width: 141px;
      height: 24px;
    text-align: center;
  font: Bold 13px/20px Noto Sans;
  letter-spacing: 0;
     color: #4D4F5C;
       -ms-border-radius: 16px;
      -o-border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
    border-width: 0px;
    background: rgb(250, 250, 251);
    outline:none;
    cursor: pointer;

      }
          .btn-n:active{
              width: 141px;
          height: 24px;
      -ms-border-radius: 16px;
      -o-border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
    border-width: 0px;
    background: rgba(202,206,213,255);
          opacity: 1;
  }

  .btn-i{
    opacity: 1;
        top: 24px;
       left: 728px;
      width: 88px;
      height: 24px;
    text-align: center;
  font: Bold 13px/20px Noto Sans;
  letter-spacing: 0;
     color: #4D4F5C;
       -ms-border-radius: 16px;
      -o-border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
    border-width: 0px;
    background: rgb(250, 250, 251);
    outline:none;
    cursor: pointer;

      }
          .btn-i:active{
              width: 88px;
          height: 24px;
      -ms-border-radius: 16px;
      -o-border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
    border-width: 0px;
    background: rgba(202,206,213,255);
          opacity: 1;
  }

  .btn-t{
    opacity: 1;
        top: 24px;
       left: 944px;
      width: 92px;
      height: 24px;
    text-align: center;
  font: Bold 13px/20px Noto Sans;
  letter-spacing: 0;
     color: #4D4F5C;
       -ms-border-radius: 16px;
      -o-border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
    border-width: 0px;
    background: rgb(250, 250, 251);
    outline:none;
    cursor: pointer;

      }
          .btn-t:active{
              width: 92px;
          height: 24px;
      -ms-border-radius: 16px;
      -o-border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
    border-width: 0px;
    background: rgba(202,206,213,255);
          opacity: 1;
  }

.btn-upload{
    top: 16px;
      left: 76px;
      width: 135px;
      height: 32px;
        cursor: pointer;
        -ms-border-radius: 16px;
      -o-border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
    border-width: 0px;
   background-color: rgb(232, 238, 245);
    outline:none;
      font-family: Noto Sans;
      font-size: 13px;
      text-align: center;
      color:#4d4f5c; 
      }


<div style="width: 100%;height: 100%;">
  <div style="width: 100%; height: calc(100% - 64px);">
      <div id="inline-container" >
          <div id="_bg__home___quadrado___6_colunas"  ></div>
          <div>
            <input type="text" class="search_box" placeholder="Search..."/> 
           </div>    
          <div class="Upload"  >             
                  <button class="btn-upload"> Upload Files</button>              
          </div>
          <div class="It">
            <button  class="btn-i">Settings</button>
          </div>

          <div class="Ta">
            <button  class="btn-t">Settings</button>
          </div>

          <div class="No">
            <button  class="btn-n">Settings</button>
          </div>

          <div class="Ca">
             <button  class="btn-c">Settings</button>
          </div>
      </div>
  </div>
</div>

Answer 1

Here's how I would write the markup and styles for this. You can use flex-box.

https://jsfiddle.net/sheriffderek/yao1wdgp/ (live example)

 * { box-sizing: border-box; } body { margin: 0; }.page-section { border: 1px solid orange; }.page-section.inner-column { width: 98%; max-width: 900px; /* arbitraty */ margin-right: auto; margin-left: auto; padding: 10px; border: 1px solid blue; }.masthead { border: 1px solid lime; }.masthead.settings-list { margin: 0; padding: 0; list-style: none; /* */ margin-top: 10px; } @media (min-width: 400px) {.masthead { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }.masthead.settings-list { display: flex; flex-direction: row; margin-top: 0; } }

 <header class="page-section site-header"> <div class="inner-column"> <nav class="masthead"> <button class="upload">upload</button> <ul class="settings-list"> <li class="setting"> <button>Settings A</button> </li> <li class="setting"> <button>Settings B</button> </li> <li class="setting"> <button>Settings C</button> </li> <li class="setting"> <button>Settings D</button> </li> </ul> </nav> </div> </header>

Answer 2

You'll have to change your positions from hardcoded pixels, ex 20px to a responsive measurement such as % or em . This is because pixels are fixed-size units while percent and ems are scalable units.

Try experimenting with different units and numbers until the page reacts in the manner you expect.

CSS Units explained

Answer 3

Just use @media only screen and (min-width: 600px) in your css. This helps you to allow different styling for different screen sizes. Use one for Pc, tablet and smartphone. You can change in it all other CSS Attributes.