Member Avatar for SmartBeaver

Pixels...ugh. They work fine for height, but width...anyways.

Id like suggestions as to what measurement form I should use. Im stooping with the pixels for width so....

Suggestions?

Thanks!

  • 4 Contributors
  • 5 Replies
  • 116 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by SmartBeaver

Dani AI

Generated

Good points from , and — they rightly pushed away from rigid pixel-only layouts. Since this thread was started, modern CSS gives a few practical ways to make widths fluid, accessible and predictable without relying on fixed pixels.

Prefer root-relative and viewport-aware sizing for scalable UI: use rem for consistent typography tied to the root font-size, viewport units (vw/vh) for large, page-level scaling, and the clamp() function to define a sensible min/ideal/max size so things never get too small or huge (clamp(), ). For images, serve appropriate densities and sizes with srcset/picture so graphics stay sharp on high-DPI screens and don’t force layout breakage (Responsive images).

Use layout systems that adapt instead of trying to pin widths. Flexbox and Grid (with the fr unit and minmax) let content flow naturally; box-sizing: border-box makes math simpler; container queries allow components to respond to their container rather than the whole viewport (CSS Container Queries). Combine min-width/max-width constraints with those units to avoid overflow while keeping fluidity.

Quick checklist to apply now: set box-sizing, pick rem for type, use clamp() for scalable headings, prefer Grid/Flex for layout, add responsive-image markup, test by zooming fonts and on narrow viewports, and use @supports or feature queries for graceful fallbacks. Example patterns are concise and portable — aim for content-driven breakpoints, not device-specific ones.

/* practical defaults */
* { box-sizing: border-box; }

h1 { font-size: clamp(1.25rem, 5vw, 2.5rem); }

.container {
  display: grid;
  grid-template-columns: 1fr minmax(30ch, 50vw) 1fr;
}

Recommended Answers

All 5 Replies

Member Avatar for MidiMagic

Use relative measures, not absolute ones.

- Use percent to arrange objects across the width of the page, and to set the sizes of box objects.

- Use points for items related to text size.

Member Avatar for almostbob

Pixels for images that are pixels wide/high, float:left or float:right to wrap them in the page text
ems or %age for fonts, ::do not set any absolute size for screen fonts, the user may have settings you don't know and your page is illegible, lost customer
%age for all other elements

Set separate styles for @media screen and @media print at minimum, on paper set point sizes for fonts.

pages adjust to screen resolution, window size, users display settings,
layout works in multiple browsers and multiple OS

don't attempt to make the page layout exactly anything, too many browsers render differently
just make it work.
this page gets horizontal scroll bars when the window size is small enough,
but, its looks similar, and it works.

works is the big thing

Member Avatar for superchris

- Use percent to arrange objects across the width of the page, and to set the sizes of box objects.

A good plan, but in the case of a fixed width layout, percentages obviously won't work :P I use em if I want a fixed width layout, because em is dependent on text size. Resizing the text in your browser causes the width of the site to stretch to accomodate it, which is nifty.

Also, look at the CSS2 max-width property, which allows you to say "I want my page this width, but if the browser window is smaller, squash it in!" ...pretty handy in my opinion (but don't forget the degradation in <=IE6!)

Just a couple of thoughts :)

Member Avatar for almostbob

Also as an aside

Keep content on the left of the screen, unneccessary advertising and navigation on the right
if the page does get to a screen that needs horizontal scrolling, the part that the user is reading is on screen, the dross is offscreen (like this page) user friendly,

not ebay : navigation on the left, auction items offscreen to the right

Member Avatar for SmartBeaver

Thanks to all of you!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.