Forums

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

Home › Forums › CSS › Using em and rem everywhere instead of px

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 1, 2016 at 11:54 pm #244132
    CROSP
    Participant

    I am relatively new in web development, but I am trying always to find the best way and keep my code even HTML and CSS be scalable and page responsive.

    Most of time I have been writing application using Java, C/C++ …

    When I have seen CSS of so called Premium responsive template, I was amazed by huge amount of magic numbers specified in pixels.
    The problem are not magic numbers (we have no variables in css), but in units used.

    I know CSS/HTML/JavaScript quite good, but I wan’t to find right way to structure my code an make page as responsive as it is possible.

    Sometime ago I read about rem and em and I thought, that this is awesome that I could specify everything using relative units and this would help to make my page responsive.

    And I’ve started to use em and rems everywhere where I saw pixels.

    Here is short example

    <!-- Intro Section -->
<section id="home">
   <div class="intro">
    <div class="intro-sub">
    </div>
    <div class="intro-title">
      <h1></h1>
    </div>
    <div class="intro-description">
      <p></p>
    </div>
    <div class="social-icons">
      <ul class="list-inline">
        <li><a href="#"><i class="fa fa-github"></i></a></li>
        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
      </ul>
    </div> <!-- /.social-icons -->
  </div>
</section>

    And CSS used

    #home {
    font-size: 1.5rem;
    }
    .intro {
    padding: 1em 1em;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    }
    .intro p {
    font-size: 1.3em;
    margin-bottom: 2em;
    }
    .intro-sub {
    color: #fff;
    font-size: 1.5em;
    margin-bottom: 1em;
    }
    .social-icons a i {
    position: relative;
    color: #fff;
    font-size: 1.2em;
    margin: 0 7px;
    line-height: @socialIconSize;
    text-align: center;
    width: @socialIconSize;
    height: @socialIconSize;
    }

    As you can see I have specified even width and height in em.

    My logic is following

    I have module, for instance home/intro section, root div has font-size specified in rem, all elements inside root div use em as units. When does this make sense ?

    @media only screen and (max-width : 768px) {
    #home {
        font-size : 1.4rem;
    }
}

    With one line of code I’ve just changed whole module size proportionally and I don’t have to specify separate attributes and furthermore nested attributes.
    I thinks that’s cool !

    But on the other hand, it is becomes a little bit painful to calculate when nested element declares it own font-size. Secondly, I don’t know if it is correct, when user changes font size in browser settings it assumes to change only font size, but not width and height of elements, am I right ? So in my case if user changes font size of the browser, the full page will become larger. Than again, it makes page looks proportionally nice but in case of changing only font size most of pages become unusable.
    I have seen some examples of using ems in bootstrap for media queries, but I have never seen whole site that uses only relative units.

    I am really confused about all this stuff, I cannot decide when to use relative units, should I use only them or I still have to use plain old pixels.
    I have spent days trying to find an answer, but nothing was found.

    Please help to find the right way, understand when to use specific unit.

    I would be grateful for any help

    August 2, 2016 at 5:52 am #244137
    Beverleyh
    Participant

    ‘Rules’ that I like/try to work by;

    Use r/ems for typography and vertical measures
    font-size, height, line-height*, margin, padding, and media queries (based on 16px default browser size and despite any base font-size overrides)
    * or use unitless line-height so they scale to font-size on child elements

    Use % for layout and horizontal measures
    width, nested margin/padding, image, font-size reset on <body> (but no other font)

    Use px for hairline borders and font-size reset

    Use vw/vh (viewport) units for typography

    Viewport units can also be used when an element’s width/height needs to be relative to viewport rather than parent.

    August 2, 2016 at 8:35 am #244152
    CROSP
    Participant

    Thanks for answer, that is great, maybe you can suggest something to read on this topic ?
    What can you say about my example is it horrible ? And I should not use rem/em like this ?
    Could you please explain some more things ?
    1. You mean that it is possible to use rem/em for height, and % for width, I have never seen before such code.
    2. I agree that borders should be specified using px only, because in case of em we don’t need borders to be enlarged when font-size changes. But paddings and margins, consider following situation. I have padding set to 1em when user changes font size from default ( 16px ) to 24 px padding also becomes 24px at the same time as text becomes larger, so in this case text may be unreadable because it will be straight vertical line of letters, wont it ?
    3. What about cross-browser support. Not all browsers support vh/vw even rem units ?
    4. In case of using % for width we have to specify width of parent element, but sometimes it is very difficult to set every width property in percent, because it should hierarchically starting from body .

    August 2, 2016 at 8:58 am #244161
    Beverleyh
    Participant

    Use your own judgement – they’re just guidelines that I try to follow, but each case will be different. It depends on what you’re trying to achieve, browser specifics and design briefs. A lot of times you’ll “feel” your way around what works best in any given situation, sometimes with a lot of trial and error.

    And you would use fallbacks for units that aren’t supported by X browser.

    In any case, these are general guidelines I’ve picked up over the years, both through what I’ve read in popular online blogs, and by working on real life web sites/applications. And some are just my own preferences. Unfortunately I don’t have anything finite that I can link you to that would explain the whole caboodle.

    August 2, 2016 at 1:29 pm #244168
    CROSP
    Participant

    Thx.
    Could you please explain one thing.

    .super-component {
     height : 25em;
     width  : 20%;
}

    Are you using something like that ?
    Or you are trying to avoid using width and height in one class ?

    August 2, 2016 at 2:26 pm #244175
    Beverleyh
    Participant

    I use whatever is necessary for the job (depends on time, project size, code-base size and whether I’m starting from scratch or adding to something that already exists, team size, etc. It’s very hard to quantify), although I would try to avoid setting a fixed height on anything unless required – and yes, I still occasionally work on fixed width/height projects using pixels if the brief calls for it (e.g. I’m currently redeveloping digital signage that will only be displayed internally, in one browser, on one TV, so it doesn’t need to be responsive, or have polyfills/fallbacks). Again my choices depend on what I’m doing, just like your choices will depend on whatever you’re doing. Keep reading, keep learning, keep trying out new techniques, maybe collaborate with others or work on open source projects, and your comfort/experience will grow. I think that’s all any of us can do.

    August 5, 2016 at 12:15 am #244231
    CROSP
    Participant

    Thank you for your help, appreciate it !

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