CODEWITHSUNDEEP
cssresponsive-design
matanox
matanox

Reputation: 13746

pixel size across devices

Many front-end definitions in CSS use pixels as their measure. When designing for multiple display sizes, how is that a relevant measure? I assume the pixel size is a function of the display resolution. Is there any way to use real sizes (e.g. millimeters or likewise), or how does it really make sense to use pixels as a measure given the great variance in screen resolutions in the wild?

Upvotes: 1

Views: 159

Answers (2)

Josh Crozier
Josh Crozier

Reputation: 241208

Font-relative lengths: the ‘em’, ‘ex’, ‘ch’, ‘rem’ units

Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

Absolute lengths: the ‘cm’, ‘mm’, ‘in’, ‘pt’, ‘pc’, ‘px’ units

Note, not all of these lengths are fully supported across browsers. See http://caniuse.com/viewport-units

Source: http://www.w3.org/TR/css3-values/

Absolute lengths, such as px are often used in media queries for responsive design, along side with a viewport tag set such as <meta name="viewport" content="width=device-width">. This can help target screen resolutions.

Viewport percentage based lengths are probably the most optimal length, however they are not fully supported throughout all browsers; therefore they may not be your best option.

Upvotes: 2

Baschi
Baschi

Reputation: 1128

You can use several types of units take a look at the W3C CSS units.

Upvotes: 1

Related Questions