CODEWITHSUNDEEP
htmlcssweb-applicationsresponsive-design
Wasim Shaikh
Wasim Shaikh

Reputation: 7030

Responsive design unit

I am creating large web application using Foundation 3.0 UI framework and it have px based layout and font-sizing.

In design there is "em" based font-size/line-height and padding/margins. I want to know that Is it good option to choose "em" based font size and padding for responsive layout for smartphones?

Upvotes: 0

Views: 626

Answers (2)

dsgriffin
dsgriffin

Reputation: 68566

Yes, using em and % over px is definitely better for responsive design websites/applications, because unlike px which is an absolute value, em can be scaled depending on the resolution it's viewed at which is crucial if you want to target smartphones, tablets etc.

Upvotes: 1

Sean
Sean

Reputation: 6499

I think the main advantage for em in terms of responsive design is the way that you can so easily change the font size for different screen sizes.

E.g. if you use media queries for large screens and small screens (say, mobiles and TV's) you're going to want to change the font size for both of them.

If you have everything sized in em's you can simply change the font-size on the body, like so:

    /* For TV's (or other large screens */
    @media screen and (min-width: 1800px) {
        body { font-size: 1.4em; }
    }

    /* For mobiles */
    @media screen and (max-width: 400px) {
        body { font-size: 0.9em; }
    }

Where as if you had everything sizes in px you've have to do a LOT more work resizing the font's.

EDIT: Using em for margins + padding may also be a good idea for a responsive layout, as I understand it, if you resize the body font size (as shown above) you'll also resize the margins + padding (making them either smaller or larger) which could also be very beneficial for a responsive design.

Upvotes: 2

Related Questions