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;
     }
     }

If you are creating a portal for your thesis, at least one of the questions you will have to answer when you present it will be about responsiveness. How are you going to answer it? I did **this** because some guy on SO told me so? When did learning and research for a thesis become obsolete? This might come as a shock, but a pixel is actually an angle. You might want to start reading. — tao, Apr 24 '16 at 01:16
Im just looking for suggestions and ideas sir because im new to html and css. is it a bad thing? — nethken, Apr 24 '16 at 01:20
No, it's not. All I'm saying is that SO is not the right type of reference for a thesis. You need to research it and be prepared properly. I wish you good luck with your project and I'm hoping my intervention helps you. As for your question, my personal advice is to use `rem` for responsiveness levels. You might want to take a look at Twitter Bootstrap 4. — tao, Apr 24 '16 at 01:32
Thank you sir ill test that rem. Cheers :D Sorry for misunderstanding your comment because i'm not fluent in english and only know few words hahaha. — nethken, Apr 24 '16 at 01:40

score 9 · Accepted Answer · answered Apr 24 '16 at 01:04

9

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.

answered Apr 24 '16 at 01:04

Gaurav Aggarwal

9,809
6
36
74

How about on text and links sir? im using padding and px for that. – nethken Apr 24 '16 at 01:12
other than `%` and `px` there is one more property `em` use it and read this for reference http://stackoverflow.com/questions/15649244/responsive-font-size – Gaurav Aggarwal Apr 24 '16 at 01:14
Aggrwal. Hi sir. I tried to run my design to chrome developer tools as mobile and the media queries is working but when i tried to run as a desktop with the same size as the mobile its not working. Im trying to say how can i do it with the desktop? diffrent queries? If this comment will change the topic ill just delete it. – nethken Apr 24 '16 at 01:37
Because when i minimized the browser the size of the site will become small lets assume its 320 px same as the media queries of the mobile how can i do it on the desktop? – nethken Apr 24 '16 at 01:40
Codes written without `@media` queries will work in dekstop. Don't write all the code in `@media` queries. Try to use `@media` queries for smaller screen only. – Gaurav Aggarwal Apr 24 '16 at 01:42
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/110036/discussion-between-nethken-and-gaurav-aggarwal). – nethken Apr 24 '16 at 01:43

Use px or % for responsive design

1 Answers1