From ab039a08a948c775d536f071bd94b213d8b7b8d4 Mon Sep 17 00:00:00 2001
From: PragatiVerma18 <42115530+PragatiVerma18@users.noreply.github.com>
Date: Sun, 23 Jun 2019 20:34:11 +0530
Subject: [PATCH] added-device-independent-pixels-article (#36084)

* Update index.md

* Update index.md
---
 guide/english/css/css-cursors/index.md        |  9 +++
 .../css/device-independent-pixel/index.md     | 66 +++++++++++++++++--
 2 files changed, 71 insertions(+), 4 deletions(-)

diff --git a/guide/english/css/css-cursors/index.md b/guide/english/css/css-cursors/index.md
index 9abadc2edd..ca5ccb1483 100644
--- a/guide/english/css/css-cursors/index.md
+++ b/guide/english/css/css-cursors/index.md
@@ -48,6 +48,11 @@ The cursor property specifies the type of cursor to be displayed when you hover
 
 
 You can also set an image as the cursor.<br>
+
+Note: However,it won't work in case your image is too big.
+(For example,in Firefox, the size limit is 128x128 px)
+
+This also depends on the browser support.<br>
 Note: Always specify a default cursor at the end incase the specified cursor is unavailable.
 
 ```
@@ -61,3 +66,7 @@ Note: Always specify a default cursor at the end incase the specified cursor is
 * Mozilla Developer Network: <a href='https://developer.mozilla.org/en-US/docs/Web/CSS/cursor' target='_blank' rel='nofollow'>MDN</a>
 * Browser Support: <a href='http://caniuse.com/#search=cursor' target='_blank' rel='nofollow'>caniuse</a>
 * Cursor examples by w3schools: <a href='https://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=none' target='_blank' rel='nofollow'>w3schools</a>
+* [Emoji Cursors-Use emojis as mouse cursors by combining SVG with CSS.](https://www.emojicursor.app/)
+* [w3schools-HTML smileys](https://www.w3schools.com/charsets/ref_emoji_smileys.asp)
+* [CSS-Tricks](https://css-tricks.com/almanac/properties/c/cursor/)
+* [Emoji Cheat Sheet](https://www.webfx.com/tools/emoji-cheat-sheet/)
diff --git a/guide/english/css/device-independent-pixel/index.md b/guide/english/css/device-independent-pixel/index.md
index 4c0fcafb01..4f478fd479 100644
--- a/guide/english/css/device-independent-pixel/index.md
+++ b/guide/english/css/device-independent-pixel/index.md
@@ -3,11 +3,69 @@ title: Device Independent Pixel
 ---
 ## Device Independent Pixel
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/css/device-independent-pixel/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+Surfing the web is no longer confined to PC's and Laptops, but has rather outgrown to mobile devices and tablets,but,these devices are often constrained by the display media factors such as aspect ratio or sizes,and thus, there is a need of **Device Independent Pixels**.
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+CSS pixels are abstract units used by the web browsers to draw images and other content on a website.These are Device Independent Pixels (DIPs) which readjust themselves according to the pixel density of the screen they are used in.They are actually optical reference units.
+
+They are based on a **coordinate system** held by a computer and are used to scale the display of information and user interaction across different devices as per the different screen sizes.
+
+* **This is the reason why Bootstrap 4 dropped pixels for REM.**
+
+```css
+@media (min-width: 85rem) {
+  .container {
+    width: 65rem;
+  }
+}
+```
+
+## Differences and Drawbacks:
+
+* Usual Pixels are an illusion, they are not equal to the on-screen pixels.
+
+* Pixels do not truly relate the root font sizes like REM and EM sizes.
+
+* Properties such as margins, padding and line-height do not scale naturally when re-set in a line.
+
+* Their assumption as integers results in less accurate implementations on various pixel ratios.
+
+* It is difficult to manage pixels.
+
+## Relative set dimensions:
+
+### REM and EM:
+* Always use REM or EM whenever you need to set a fixed width or height.
+
+* Containers with EM dimensions are more advanced than REM despite EM being older. It works better for media-query breakpoints than REM across browsers.
+
+```css
+h2 {
+font-size: 2em;
+}
+```
+* 1rem is 16px in CSS.
+
+However, not even REM units can be of much help as they still make you guess and estimate upto a certain extent, due to missing **"proportions"**. 
+
+## Conclusion:
+
+* use CSS units and layout to make the content fluid across multiple platforms by using latest units such as :
+   
+    * rem 
+    * em
+    * vh
+    * vw
+    * percentage
+    * pt
+    * ex
+    * ch
+    * vmin
+    * vmax
+
+* use SVGs or icon fonts to have the content naturally scale up to higher screen sensities or rather sizes.
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
 
 #### More Information:
-<!-- Please add any articles you think might be helpful to read before writing the article -->
+* [CSS-TRICKS](https://css-tricks.com/rem-global-em-local/)
+* [sitepoint](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/)
+* [WebPlatform project](https://webplatform.github.io/docs/tutorials/understanding-css-units/)