Physical Pixels vs CSS Pixels vs Device Independent Pixels vs Density Independent Pixels vs PPI
I am learning web development and I am having a hard time determining what is equivalent in all of this.
I know hardware pixels and physical pixels are the smallest unit, and that density independent pixels map to actual hardware pixels via a device pixel ratio and they are used to make the viewing experience more consistent. Does this mean that the device independent pixels I'm seeing are the same thing?
Further, I read that the browser reports viewport width in CSS pixels, are these and DIPs the same thing?
I know that Pixels per inch are literal, they are the number of pixels in an inch, but how do they relate to DIPs? A totally separate measurement? When should I use that instead?
I hope this is an appropriate question, I am having issues mentally linking all of these concepts into one usable map, and didn't find any other question where they are all addressed at once.
html css
asked Jan 25 '17 at 23:24
Leah Denham
5116
add a comment |
I am learning web development and I am having a hard time determining what is equivalent in all of this.
I know hardware pixels and physical pixels are the smallest unit, and that density independent pixels map to actual hardware pixels via a device pixel ratio and they are used to make the viewing experience more consistent. Does this mean that the device independent pixels I'm seeing are the same thing?
Further, I read that the browser reports viewport width in CSS pixels, are these and DIPs the same thing?
I know that Pixels per inch are literal, they are the number of pixels in an inch, but how do they relate to DIPs? A totally separate measurement? When should I use that instead?
I hope this is an appropriate question, I am having issues mentally linking all of these concepts into one usable map, and didn't find any other question where they are all addressed at once.
html css
asked Jan 25 '17 at 23:24
Leah Denham
5116
add a comment |
I am learning web development and I am having a hard time determining what is equivalent in all of this.
I know hardware pixels and physical pixels are the smallest unit, and that density independent pixels map to actual hardware pixels via a device pixel ratio and they are used to make the viewing experience more consistent. Does this mean that the device independent pixels I'm seeing are the same thing?
Further, I read that the browser reports viewport width in CSS pixels, are these and DIPs the same thing?
I know that Pixels per inch are literal, they are the number of pixels in an inch, but how do they relate to DIPs? A totally separate measurement? When should I use that instead?
I hope this is an appropriate question, I am having issues mentally linking all of these concepts into one usable map, and didn't find any other question where they are all addressed at once.
html css
asked Jan 25 '17 at 23:24
Leah Denham
5116
I am learning web development and I am having a hard time determining what is equivalent in all of this.
I know hardware pixels and physical pixels are the smallest unit, and that density independent pixels map to actual hardware pixels via a device pixel ratio and they are used to make the viewing experience more consistent. Does this mean that the device independent pixels I'm seeing are the same thing?
Further, I read that the browser reports viewport width in CSS pixels, are these and DIPs the same thing?
I know that Pixels per inch are literal, they are the number of pixels in an inch, but how do they relate to DIPs? A totally separate measurement? When should I use that instead?
I hope this is an appropriate question, I am having issues mentally linking all of these concepts into one usable map, and didn't find any other question where they are all addressed at once.
html css
html css
asked Jan 25 '17 at 23:24
Leah Denham
5116
asked Jan 25 '17 at 23:24
Leah Denham
5116
asked Jan 25 '17 at 23:24
Leah Denham
5116
asked Jan 25 '17 at 23:24
Leah Denham
5116
asked Jan 25 '17 at 23:24
Leah Denham
5116
5116
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I know hardware pixels and physical pixels are the smallest unit, and that density independent pixels map to actual hardware pixels via a device pixel ratio and they are used to make the viewing experience more consistent. Does this mean that the device independent pixels I'm seeing are the same thing?
Further, I read that the browser reports viewport width in CSS pixels, are these and DIPs the same thing?
Yes on both counts. For example, an element with height: 200px; width: 200px is always 200 by 200 in DIPs or CSS pixels, even if the hardware is configured to display at a higher or lower resolution than usual. At a scale factor of 200%, if a 1x1 DIP or CSS pixel maps to a 1x1 physical pixel in 100%, it will map to a 2x2 physical pixel square.
I know that Pixels per inch are literal, they are the number of pixels in an inch, but how do they relate to DIPs? A totally separate measurement?
CSS does not use PPI; it only uses DPI. Section 6.4 of css-values-3 lists the following units:
dpi
Dots per inch.
dpcm
Dots per centimeter.
dppx
Dots per px unit.
The <resolution> unit represents the size of a single "dot" in a graphical representation by indicating how many of these dots fit in a CSS in, cm, or px.
For the purposes of CSS and Media Queries, a single "dot" always corresponds to a single physical pixel, never a DIP or CSS pixel, hence the dppx unit. For example, a scale factor of 200% or device pixel ratio (non-standard) of 2.0 is equivalent to 2 dppx.
edited Oct 20 '17 at 17:58
Community♦
11
answered Jan 26 '17 at 1:51
BoltClock♦
514k12711521191
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f41863545%2fphysical-pixels-vs-css-pixels-vs-device-independent-pixels-vs-density-independen%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I know hardware pixels and physical pixels are the smallest unit, and that density independent pixels map to actual hardware pixels via a device pixel ratio and they are used to make the viewing experience more consistent. Does this mean that the device independent pixels I'm seeing are the same thing?
Further, I read that the browser reports viewport width in CSS pixels, are these and DIPs the same thing?
Yes on both counts. For example, an element with height: 200px; width: 200px is always 200 by 200 in DIPs or CSS pixels, even if the hardware is configured to display at a higher or lower resolution than usual. At a scale factor of 200%, if a 1x1 DIP or CSS pixel maps to a 1x1 physical pixel in 100%, it will map to a 2x2 physical pixel square.
I know that Pixels per inch are literal, they are the number of pixels in an inch, but how do they relate to DIPs? A totally separate measurement?
CSS does not use PPI; it only uses DPI. Section 6.4 of css-values-3 lists the following units:
dpi
Dots per inch.
dpcm
Dots per centimeter.
dppx
Dots per px unit.
The <resolution> unit represents the size of a single "dot" in a graphical representation by indicating how many of these dots fit in a CSS in, cm, or px.
For the purposes of CSS and Media Queries, a single "dot" always corresponds to a single physical pixel, never a DIP or CSS pixel, hence the dppx unit. For example, a scale factor of 200% or device pixel ratio (non-standard) of 2.0 is equivalent to 2 dppx.
edited Oct 20 '17 at 17:58
Community♦
11
answered Jan 26 '17 at 1:51
BoltClock♦
514k12711521191
add a comment |
I know hardware pixels and physical pixels are the smallest unit, and that density independent pixels map to actual hardware pixels via a device pixel ratio and they are used to make the viewing experience more consistent. Does this mean that the device independent pixels I'm seeing are the same thing?
Further, I read that the browser reports viewport width in CSS pixels, are these and DIPs the same thing?
Yes on both counts. For example, an element with height: 200px; width: 200px is always 200 by 200 in DIPs or CSS pixels, even if the hardware is configured to display at a higher or lower resolution than usual. At a scale factor of 200%, if a 1x1 DIP or CSS pixel maps to a 1x1 physical pixel in 100%, it will map to a 2x2 physical pixel square.
I know that Pixels per inch are literal, they are the number of pixels in an inch, but how do they relate to DIPs? A totally separate measurement?
CSS does not use PPI; it only uses DPI. Section 6.4 of css-values-3 lists the following units:
dpi
Dots per inch.
dpcm
Dots per centimeter.
dppx
Dots per px unit.
The <resolution> unit represents the size of a single "dot" in a graphical representation by indicating how many of these dots fit in a CSS in, cm, or px.
For the purposes of CSS and Media Queries, a single "dot" always corresponds to a single physical pixel, never a DIP or CSS pixel, hence the dppx unit. For example, a scale factor of 200% or device pixel ratio (non-standard) of 2.0 is equivalent to 2 dppx.
edited Oct 20 '17 at 17:58
Community♦
11
answered Jan 26 '17 at 1:51
BoltClock♦
514k12711521191
add a comment |
I know hardware pixels and physical pixels are the smallest unit, and that density independent pixels map to actual hardware pixels via a device pixel ratio and they are used to make the viewing experience more consistent. Does this mean that the device independent pixels I'm seeing are the same thing?
Further, I read that the browser reports viewport width in CSS pixels, are these and DIPs the same thing?
Yes on both counts. For example, an element with height: 200px; width: 200px is always 200 by 200 in DIPs or CSS pixels, even if the hardware is configured to display at a higher or lower resolution than usual. At a scale factor of 200%, if a 1x1 DIP or CSS pixel maps to a 1x1 physical pixel in 100%, it will map to a 2x2 physical pixel square.
I know that Pixels per inch are literal, they are the number of pixels in an inch, but how do they relate to DIPs? A totally separate measurement?
CSS does not use PPI; it only uses DPI. Section 6.4 of css-values-3 lists the following units:
dpi
Dots per inch.
dpcm
Dots per centimeter.
dppx
Dots per px unit.
The <resolution> unit represents the size of a single "dot" in a graphical representation by indicating how many of these dots fit in a CSS in, cm, or px.
For the purposes of CSS and Media Queries, a single "dot" always corresponds to a single physical pixel, never a DIP or CSS pixel, hence the dppx unit. For example, a scale factor of 200% or device pixel ratio (non-standard) of 2.0 is equivalent to 2 dppx.
edited Oct 20 '17 at 17:58
Community♦
11
answered Jan 26 '17 at 1:51
BoltClock♦
514k12711521191
I know hardware pixels and physical pixels are the smallest unit, and that density independent pixels map to actual hardware pixels via a device pixel ratio and they are used to make the viewing experience more consistent. Does this mean that the device independent pixels I'm seeing are the same thing?
Further, I read that the browser reports viewport width in CSS pixels, are these and DIPs the same thing?
Yes on both counts. For example, an element with height: 200px; width: 200px is always 200 by 200 in DIPs or CSS pixels, even if the hardware is configured to display at a higher or lower resolution than usual. At a scale factor of 200%, if a 1x1 DIP or CSS pixel maps to a 1x1 physical pixel in 100%, it will map to a 2x2 physical pixel square.
I know that Pixels per inch are literal, they are the number of pixels in an inch, but how do they relate to DIPs? A totally separate measurement?
CSS does not use PPI; it only uses DPI. Section 6.4 of css-values-3 lists the following units:
dpi
Dots per inch.
dpcm
Dots per centimeter.
dppx
Dots per px unit.
The <resolution> unit represents the size of a single "dot" in a graphical representation by indicating how many of these dots fit in a CSS in, cm, or px.
For the purposes of CSS and Media Queries, a single "dot" always corresponds to a single physical pixel, never a DIP or CSS pixel, hence the dppx unit. For example, a scale factor of 200% or device pixel ratio (non-standard) of 2.0 is equivalent to 2 dppx.
edited Oct 20 '17 at 17:58
Community♦
11
answered Jan 26 '17 at 1:51
BoltClock♦
514k12711521191
edited Oct 20 '17 at 17:58
Community♦
11
edited Oct 20 '17 at 17:58
Community♦
11
edited Oct 20 '17 at 17:58
Community♦
11
11
answered Jan 26 '17 at 1:51
BoltClock♦
514k12711521191
answered Jan 26 '17 at 1:51
BoltClock♦
514k12711521191
answered Jan 26 '17 at 1:51
BoltClock♦
514k12711521191
514k12711521191
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f41863545%2fphysical-pixels-vs-css-pixels-vs-device-independent-pixels-vs-density-independen%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
