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, we’ll 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. Let’s start with two and we’re 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, let’s take the
example of an iPhone 6 whose resolution would be 750×1334 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 = 750×1334 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 user’s 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);
Here’s 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 let’s 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%; }
}
you can find such more blogs at http://findnerd.com/NerdDigest
how they are used to achieve responsiveness in web design. In this part, we’ll 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. Let’s start with two and we’re 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, let’s take the
example of an iPhone 6 whose resolution would be 750×1334 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 = 750×1334 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 user’s 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);
Here’s 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 let’s 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%; }
}
you can find such more blogs at http://findnerd.com/NerdDigest
No comments:
Post a Comment