CODEWITHSUNDEEP
htmlcssresolutionscreen-resolution
Mike McGee
Mike McGee

Reputation: 21

Problems with CSS and Screen Resolutions

I am creating a website and would like to get the opinion of some of the more experienced web developers.

How does one create a website where the element style attributes (padding, margin, height, width, etc) are appropriate for the users screen resolution?

With CSS i get to choose one value and that is the final value which will be displayed for all users, regardless of their browsing resolution.

For example, say i would like an image to be displayed 10% to the left of its container i would do the following: padding-left: 15%; Now, that may work fine for some resolutions but for others i may need that value to be higher.

What do more experienced web developers do in regards to screen resolution differences?

Upvotes: 0

Views: 1579

Answers (3)

SpliFF
SpliFF

Reputation: 39014

It depends entirely on your design goals.

Most designers use fixed-width areas and let it center on the screen.

In some cases you can use CSS media-queries to apply specific rules to different types and sizes of screens (browser support is limited).

You can use min/max-width to handle many cases of content growing too large or small - but there is no equivalent for margins.

SVG graphics can be used to provide scalable images that look good at any resolution.

Some companies provide an entirely separate site for mobile users.

There are other tips and tricks but in general most designers avoid these issues by using fixed-width layouts - even though that's not always ideal.

Upvotes: 1

Sherm Pendley
Sherm Pendley

Reputation: 13622

I usually define those styles in em units, which are relative to the font size. So, increasing the text size increases padding & margins proportionately.

Upvotes: 0

Winfield Trail
Winfield Trail

Reputation: 5695

It sounds like your goal is to have your layout look literally the same at any resolution, which isn't really practical. Remember that images scale poorly! What most designers do is use percentages where possible to allow the layout to "flow" to fit most resolutions while remaining attractive.

If you analyze (for example) Stack Overflow. you'll see that it is a fixed-width set that is itself centered in the browser. Apple does the same thing, with some art elements that are displayed gracefully at any window width. It's an artistic problem, and I'm not sure the answer can be given with any more clarity than that.

Upvotes: 1

Related Questions