Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › Design › What should be height units in Responsive design

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 7, 2013 at 10:59 pm #152275
    Rak_Rin
    Participant

    I am trying to develop responsive web Application, Which is resolution independent.
    I want to know which units I can used for height of div.
    Currently I am using percentage(%) units for width and height, but it does not work all time , example: in case of float div and relative position div.
    But when I use pixel unit for height and percentage (%) for width it works fine.
    Is this correct method ??

    October 8, 2013 at 2:50 am #152288
    Rak_Rin
    Participant

    Hello Jaycrisp,

    I have header which is fixed to top.

    If I put height 10% to header div then it squeezed in landscape orientation, that height look different in landscape and portrait mode.

    Could you refer following Html code to getting this:

    <!DOCTYPE html>
<html>
  <head><title>height px or percentage</title>

  <style type="text/css">

  html, body 
  {width: 100%;
  min-height:100%;
  margin: 0px;
  padding: 0px;
  -webkit-text-size-adjust: none;
  font-size:62.5%;
  background:#906aaf}

.header{
width:100%; 
height:10%;
background-color:#7e599e;
position:fixed;
z-index:1;
top:0}



</style>
</head>
<body>

<div class="header">

</div>

</body>
</html>
    October 8, 2013 at 2:55 am #152289
    Paulie_D
    Member

    I’d try to avoid assigning a height attribute as it should generally be defined by the content.

    This…using height in percentages just isn’t part of responsiveness.

    October 8, 2013 at 3:54 am #152303
    Rak_Rin
    Participant

    I have made codepen for my code

    find the below mention link:

    height in % for header div:

    height in % ….. please click for example

    height in pixel for header div:

    height in pixel ….. please click for example

    could you tell me which is ideal code so i can use same for future development

    could you check this both link in Responsive design view.

    October 8, 2013 at 4:04 am #152305
    tomek
    Participant

    could you tell me which is ideal code so i can use same for future development

    There isn’t anything like “ideal code”, since web standards are evolving all the time. What works today, in a month may be obsolete.

    Using either percentages or pixels for achieving responsiveness won’t cut it. On my screen, your header with percents was a lot bigged (twice or more) that the one with pixels.

    If you want to go with pixel-perfect design (which is often the request from a lot of customers out there), go with media queries. You can do pixel-perfect “large” version and adaptive, height: auto-version for mobile devices.

    October 8, 2013 at 4:56 am #152313
    Rak_Rin
    Participant

    I’ve made small change in your codepen.

    In styles I have globally define padding and margin “0”

    Now What would be top and bottom padding for text ….. is it pixel or percentage??

    please see below mention codepen

    http://codepen.io/Rak_Rin/full/FnHgy

    October 8, 2013 at 5:26 am #152318
    Alen
    Participant

    % based margins and padding are relative to the width in CSS. So if your element is responsive the bigger it is the bigger margins you’ll have. Is this what you want? If not.

    Use em units.

    So if your base font-size is 16px. Padding of 1em would equal to 16px.

    https://css-tricks.com/css-font-size/

    October 8, 2013 at 5:38 am #152321
    jaycrisp
    Participant

    It would depend on what you are trying to achieve with the design, so there isn’t really a “correct” answer to that question.

    Me, I like to make sure the vertical margins/padding is consistent throughout. The easiest way to do that would be with pixels, however this won’t scale with increases in font-size.

    Ems will do that, but it can get complicated as an em is proportional to the font size of that element, so you end up with all sorts of wierd numbers.

    On the project I’m currently working on, I’m using rems, with a pixel based fallback (using a SASS mixin), so that browsers that don’t support it will still work ok.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘Design’ is closed to new topics and replies.