Use px or % for responsive design

Question

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

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

and here is the 480px

here is the 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

A good practice is to use % where it can be used because it reduces the effort of writing another code for responsive as it works according to the screen size but we use px also where % we cannot use % and then in @media queries we write another css for that according to screen sizes.

For Example

Suppose we need to make 2 half width div inside a full width div we can write it in % like this

HTML

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

css

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

Above % is successful because it div will resize according to the screen size.

In some cases we are not able to use % like we are creating buttons in a div which should be fix width and height then we can simply use px in width and if we need to resize in smaller screen then just use @media queries.

@media queries can be used multiple with defines screen sizes

Read THIS for brief about @media queries.