How a CSS Pixel Size Is Calculated

using css pixel calculating screen size, where is wrong?

A CSS pixel is not always 0.26mm

From CSS W3:

The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm's length, 1px thus corresponds to about 0.26 mm (1/96 inch).

The iPhone4 is not 96dpi. With a device pixel ratio of 2, its "CSS dpi" is around 163. Since 96dpi devices render 320px at 83.2mm, mathematically, 163dpi devices should render 320px at 49mm.

calculating pixel size from ppi

(224.17 pixels / 1 inch) * (1 inch / 25.4 mm) * 13.6 mm = 120 pixels

CSS resolution calculations

You're over complicating things somewhat.

With css, you work with css pixels. The devices themselves then decide what to do with your css pixels depending on their resolutions. For responsive builds you can work exclusively with css pixels and allow the devices to decide how they convert those css pixels to actual

For example, if you used the media query:

@media screen and (min-width: 480px)

you would hit any device that reported it's width to be 480 css pixels (or greater) wide. The actual number of physical pixels is irrelevant is not the problem of the css author.

One area where this is not the case is images however. You might want to serve up images that are twice the quality to retina devices as those extra pixels will be useful for image clarity, in which case a dpi media query would be useful. (caveat: bear in mind many mobile users would rather have a page load quickly than have a super high quality image that is four times the size).

@media screen and (min-resolution: 192dpi) {
    /* load that high definition image here */
}

The ratio between device pixels and dpi is a function of the size of the pixels, so this is set on a device by device basis, usually depending on how tiny the manufactures can make their pixels to advertise the highest definition display. Retina was a big step forward in this area.

what exactly is device pixel ratio?

Short answer

The device pixel ratio is the ratio between physical pixels and logical pixels. For instance, the iPhone 4 and iPhone 4S report a device pixel ratio of 2, because the physical linear resolution is double the logical linear resolution.

Physical resolution: 960 x 640
Logical resolution: 480 x 320

The formula is:

$linres_p/linres_l$

Where:

$linres_p$ is the physical linear resolution

and:

$linres_l$ is the logical linear resolution

Other devices report different device pixel ratios, including non-integer ones. For example, the Nokia Lumia 1020 reports 1.6667, the Samsumg Galaxy S4 reports 3, and the Apple iPhone 6 Plus reports 2.46 (source: dpilove). But this does not change anything in principle, as you should never design for any one specific device.

Discussion

The CSS "pixel" is not even defined as "one picture element on some screen", but rather as a non-linear angular measurement of $0.0213°$ viewing angle, which is approximately $1/96$ of an inch at arm's length. Source: CSS Absolute Lengths

This has lots of implications when it comes to web design, such as preparing high-definition image resources and carefully applying different images at different device pixel ratios. You wouldn't want to force a low-end device to download a very high resolution image, only to downscale it locally. You also don't want high-end devices to upscale low resolution images for a blurry user experience.

If you are stuck with bitmap images, to accommodate for many different device pixel ratios, you should use CSS Media Queries or the HTML picture Element to provide different sets of resources for different groups of devices. Combine this with nice tricks like background-size: cover or explicitly set the background-size to percentage values.

Example

#element { background-image: url('lores.png'); }

@media only screen and (min-device-pixel-ratio: 2) {
    #element { background-image: url('hires.png'); }
}

@media only screen and (min-device-pixel-ratio: 3) {
    #element { background-image: url('superhires.png'); }
}

This way, each device type only loads the correct image resource. Also keep in mind that the px unit in CSS always operates on logical pixels.

A case for vector graphics

As more and more device types appear, it gets trickier to provide all of them with adequate bitmap resources. In CSS, media queries is currently the only way, and in HTML5, the picture element lets you use different sources for different media queries, but the support is still not 100 % since most web developers still have to support IE11 for a while more (source: caniuse).

If you need crisp images for icons, line-art, design elements that are not photos, you need to start thinking about SVG, which scales beautifully to all resolutions.

What is calculated value for font-size

Your question is a little confusing, but I'll try to cover the details off as I think you're asking.

First, I think you mean the "Computed" value rather than the "Calculated" value. You also ask in a comment about the "Used" value, and to get a full picture we also need to cover some other values, the "Specified" value, the "Resolved" value and the "Actual" value.

Now taking the font-size first, we have for the .myspan element

Specified value = 220%
Computed value = 18px * 220% = 39.6px
Resolved value = 39.6px

(The resolved value for font-size is the computed value)
Used value = 39.6px

(Always the same as the computed value for font-size)
Actual value = about 39-40px

(The CSS pixels will be converted to device pixels. some other approximations may be made based on the available fonts and the closest renderable number on the device is used)

For the width, things work slightly differently

Specified value = 50%
Computed value = 50%

(The pixel length is not known at computed value time because the layout hasn't happened at this step)
Used value = 200px * 50% = 100px

(The layout is done and the pixel value is determined)
Resolved value = 100px

(The resolved value for width is the used value)
Actual value = about 100px

(As with font-size, the CSS pixels will be converted to device pixels and the closest renderable number on the device is used)

Now, what causes confusion is that when you use getComputedStyle() in JavaScript, or inspect the "Computed Values" tab in the browsers' developer tools, you don't get the "Computed" values for the element - You get the "Resolved" values for the element.

For getComputedStyle(), this is just an historical anomaly that exists for backward compatibility reasons. Why the developer tools also report the Resolved value, I don't know.