gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added-device-independent-pixels-article (#36084)

Browse Source 
* Update index.md

* Update index.md
This commit is contained in:
PragatiVerma18
2019-06-23 20:34:11 +05:30
committed by Tom
parent 64056b1bb4
commit ab039a08a9
2 changed files with 71 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
guide/english/css/css-cursors/index.md
View File

@ -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/)

66
guide/english/css/device-independent-pixel/index.md
View File

@ -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/)