5

I'm redesigning my site because looks awful on different resolutions (apart devices), most guides and tutorials rely on % and em than fixed values. I'm still learning this so I'm reading everything around.

Thought this would solve the question with different display sizes but again: we have to craft some more CSS for fix some specific issues.

If I need to add media-queries for extra display sizes, why use % then? Do use % really reduce coding? Is ok need to add some extra css for some sizes or am I doing something wrong?

Thanks for any advice!

1
  • 1
    Saying something is 10px doesn't leave any room for changes. But saying it's 1em or 50% makes it entirely dependent on other things, leading to fluid/flexible changes.
    – Marc B
    Jul 25, 2012 at 21:55

4 Answers 4

4

The purpose of using em sizes is to allow the base your design off of the user's choice of font size. I may use a larger font size because I have a huge monitor and poor eye sight, while someone else might prefer a smaller font. By using em units, your design will accommodate both of our font preferences and resize accordingly instead of forcing the font size to a given standard (eg. "12 point font").

In a similar manner, percent (%) units allow your design to respond to different browser sizes. Used in conjunction with em units, this will allow text-based elements to respond to arbitrary font size choices, and layout elements to respond to arbitrary browser sizes.

It is perfectly acceptable to design a single responsive design for all media types. Media queries are intended when you want different display styles on different devices, not to "support" different display sizes. An example would be to use serif fonts on print media and sans-serif fonts on display media, since usabilities studies have shown that these font faces are preferred for these sorts of media.

Furthermore, it allows you to do custom styling for some situations like mobile devices, where you may want to consider that the user has a limited amount of bandwidth and maybe cut down on extra images. Or if you want to display your content in a completely different layout for the microscopic screen afforded by certain phones.

1
  • Thanks for explain.It seems that creating a responsive structure that fits well without using media queries is quite harder. Most problem Im'facing is that thoug widths are %, I set paddings in fixed sizes, so works poorly :(
    – Diana
    Jul 26, 2012 at 0:32
1

% allows your site to be responsive to the user's method of viewing. Let's say you have a div that's at 100%. It'll fill the entire section, regardless if it's on a phone or desktop.

It should be okay to add extra CSS for sizes as well. As far as I know, you can have some elements display in % and some with a fixed px value, although they might conflict depending on how the page is setup or what it is being viewed with.

1

For example.

Your website header have the width of 950px; But in a mobile device, it may fit at 450px;

So, you use media-query to reposition some elements and handle some size issues and set the header width to 450px;

But, if you use % values, you can set your header div to have 100% of width base in its parent. So you can only change the body or some container div width, the all childs going to adapt.

1

Diana,

I am glad I came across this question. I literally just uploaded my first responsive design which is 90% based off of percentages when it comes to font-size and widths.

Check out the below: http://www.noxinnovations.com/portfolio/responsive/

Obviously, it doesn't look amazing, and the image looks way out of place... But do me a favor and resize your browser window, by slowly making it smaller and smaller. I did that by setting a percentage width!

Trust me, I tried doing this responsive design test with pixels, and it didn't turn out too well. The percentage width ensures that regardless of the resolution and or pixel dimensions (per se) the design will always cater to the size of the screen. Also, I did not have to use one CSS3 Media Query, but I would highly suggest using CSS3 Media Queries only when you need them.

In my opinion, I should probably have a Media Query for a larger screen.

I hope this helps you as much as it has helped me! Thank you, Aaron

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.