In the previous session, we learnt the basics of media queries and covered some points about how they are used to achieve responsiveness in web design. In this part, well continue with other important aspects of the same.
As we are well aware now that responsive design calls for dynamic change in design layout based on the device conditions. This essentially means that one has to re-fit the content to match the new resolution, dimensions, orientation etc. But before that, one should be familiar with some important concepts. Lets start with two and were going to pick others as we go along:
1. Fluid breakpoints or simply Breakpoints -
The points at which this re-adjustment will be done. In other words, breakpoints are the points at which we want the design to alter itself. These breakpoints are nothing but some specific sizes and resolution at which the layout is supposed to change. Some common breakpoints are:
-
>1280 resolution
-
960px resolution
-
768px
-
640px
-
480px and 320px
2. Flexible Media Elements -
Media Elements are nothing but different types of content which needs to be re-sized, re-fitted, re-adjusted. Since these need to change dynamically, hence the term flexible. Now to implement these changes, the following needs to be factored in:
-
Media Display Density
-
Media View port Standard
Below I am going to elaborate on these two:
I. Media Display Density
With the number of devices in use today with different sizes, resolutions and pixel densities, it becomes critical to factor in these while setting the proper media query for different screens. One of such important factors is Display Density.
Display Density or Pixel Density is basically the number of pixels you can fit in a fixed space. This fixed space is normally measured in inches and so the unit used to define Display Density is PPI and DPI (because sometimes pixels are also referred to as Dots). Please note that Display Density is different from Resolution. To learn the difference, lets take the example of an iPhone 6 whose resolution would be 7501334 pixels whereas its Pixel Density is 326 PPI.
What is a Pixel?
"In digital imaging, a pixel, pel, or picture element is a physical point in a raster image, or the smallest addressable element in an all points addressable display device; so it is the smallest controllable element of a picture represented on the screen."
-Wikipedia
Dots Per Inch (DPI)
DPI measurement is an old measure to use for 'pixel density'. It is a terminology which was mainly used for Printing and publishing in laser and inkjet printers.
Generally, normal monitors display around 72 DPI to 120 DPI and for laptop's screen it is slightly higher. And if we are talking about High DPI or Retina Scale, it is minimum 200 DPI or greater).
Below Various Display Density Constraints are describe with proper definition and meaning:-
A).Pixels density calculation DPI / PPI
Theoretically, PPI can be calculated on the basis of the diagonal size of the screen in inches and the resolution in pixels (width and height).
Example:
Calculating the PPI of iPhone 6:
iPhone 6 resolution = 7501334 and Diagonal screen size = 4.7 Inches
Diagonal resolution =squareroot(750 x 750) + (1334 x 1334) = 1530.38
Now divide the diagonal resolution with diagonal screen size to get the PPI
PPI = 1530.38 / 4.7 = 325.61
B). Density Independent Pixel (DP or DiP)
An application is said to be "Density Independent" when it is able to retain the physical size (from the users perspective) of media elements regardless of the screen densities.
Density Independent Pixel (DP or DiP) is an abstract value that is based on the physical volume of the device screen and web content. A virtual pixel value that we will use when defining any UI structure, to set layout dimensions or position in a density-independent way.
To achieve density independence, we use DP, an abstract (virtual) pixel instead of the physical pixel. The DP is equivalent to one physical pixel on a 160 DPI screen, which is the baseline density assumed by the system for a "medium" density screen.
C). Device Pixel Ratios
Device Pixel Ratio (DPR) is the ratio between physical pixels and device-independent pixels (DiPs) on the device. Formula of Calculating DPR is given below:
DPR = Physical Pixels / DiPs
The method of getting DPR value of any device screen is ''window.devicePixelRatio. A small example of this method is given below:
var dpr = window.devicePixelRatio;
alert('Device Pixel Ratio: ' + dpr);
Heres a table for DP, Device Pixel Ratio and other units:
Particulars |
Lower resolution screen |
Higher resolution, same size |
Physical Width |
1.5 inches |
1.5 inches |
Dots Per Inch (dpi) (dpi) |
160 |
240 |
Physical Pixels (=width*dpi) |
240 |
360 |
Density (factor of baseline 160) |
1.0 |
1.5 |
Density-independent Pixels (dip or dp or dps) |
240 |
240 |
Scale-independent pixels (sip or sp) |
Depends on user font size settings |
same |
Now lets move on to some examples to understand how Display Density plays a role in media queries for responsive design
Examples
@media(-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
(min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */
(min-resolution: 2dppx), /* The standard way */
(min-resolution: 192dpi) /* dppx fallback */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and ( min--moz-device-pixel-ratio: 1.5),
only screen and ( -o-min-device-pixel-ratio: 3/2),
only screen and ( min-device-pixel-ratio: 1.5),
only screen and ( min-resolution: 192dpi ) {
body { color:blue; }
.container { width:95%; }
}
End of this Session
In this session, we covered the overview and some relevant concepts of Flexible Media Elements for responsive design. In my next session, well continue with the other aspect of the media element - the Viewport Meta Tag.
0 Comment(s)