Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Glossary Page Fixes #2682 #2695

Merged
merged 4 commits into from
Mar 16, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion files/en-us/glossary/css_pixel/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

<p>That definition, of course, leaves a lot of wiggle room, as the terms "be comfortably seen" and "an arm's length away" are imprecise, varying from person to person. When a user is sitting at a desk in front of a desktop, the display is generally substantially farther away from their eyes than when they're on a cell phone, for instance.</p>

<p>As such, it generally suffices to say that when the unit <code>px</code> is used, the goal is to try to have the distance <code>96px</code> equal about 1 inch on the screen, regardless of the actual pixel density of the screen. In other words, if the user is on a phone with a pixel density of 266 DPI, and an element is placed on the screen with a width of <code>96px</code>, the actual width of the element would be 266 {{Glossary("device pixels")}}.</p>
<p>As such, it generally suffices to say that when the unit <code>px</code> is used, the goal is to try to have the distance <code>96px</code> equal about 1 inch on the screen, regardless of the actual pixel density of the screen. In other words, if the user is on a phone with a pixel density of 266 DPI, and an element is placed on the screen with a width of <code>96px</code>, the actual width of the element would be 266 {{Glossary("Device pixel","device pixels")}}.</p>

<h2 id="Learn_more">Learn more</h2>

Expand Down
25 changes: 25 additions & 0 deletions files/en-us/glossary/device_pixel/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
---
title: Device pixel
slug: Glossary/Device_pixel
tags:
- physical pixel
- device pixel
- Glossary
- height
- length
- pixel
- size
- unit
- width
---

<p>A "pixel" is a single physical "light bulb" on a display that is capable of displaying a full color independent of its neighbours. Computer screens displaying their content in pixels. This physical pixel is also called a "device pixel".</p>

<p>In contrast to the device pixel the {{Glossary("CSS pixel","CSS pixel")}} is a unit of length which roughly corresponds to the width or height of a single dot. The CSS pixel is defined as the physical size of a single pixel at a pixel density of 96 DPI, located an arm's length away from the viewer's eyes. A CSS pixel is therefore equivalent to many device pixels.</p>

<h2 id="Learn_more">Learn more</h2>

<ul>
<li><a href="https://en.wikipedia.org/wiki/Pixel">Pixels Wikipedia entry</a></li>
<li><a href="https://hacks.mozilla.org/2013/09/css-length-explained/">CSS Length Explained</a> on the MDN Hacks Blog</a></li>
</ul>