Use px or% for responsive design

Question

Hi, they are wondering if I use px or% for responsive design. I already used px, but it is not responsive enough because its size is fixed, can someone tell me what is better to use for flexible design? im new for html and css, as well as creating a student portal for my dissertation.

here are examples of my project, I used px to define some elements here. I think there are other ways to do this, and it’s hard to do media queries because you will do it one by one. Can someone give me ideas?

and here is 480px

here is an example of my queries ...

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {
    .img-responsive{
    width: 230px;
    height: 55px;
    padding-left: 20px;
    padding-top: 5px;
    }
    .footer{
    height: auto;
    }
    .connect{
    padding-left: 70px;
    }
    .contact{
    padding-left: 90px;
    padding-right:50px;
    padding-top: 70px;
    }
    .visit{
    padding-top:40px;
    padding-left: 110px;
    }
    p{
    padding-left: 40px;

    }
    .twitter-hover {
     background-image: url('images/twitter-hover.png');
     margin-left: 70px;
     }
     .social-slide{
     margin-bottom: 50px;
     }
     hr.carved {
     margin-top: 4em;
     }
     .copyr{
     padding-left: 20px;
     padding-right: 10px;
     }
     }

Answer 1

%, , , , px, % %, @media css .

, 2 div div, %,

HTML

<div class="parent">
  <div class="child">
  </div>
  <div class="child">
  </div>
</div>

CSS

.parent{
  width:100%;
}
.child{
  width:50%;
}

% , .

%, div, , px , , @media .

@media

@media.