Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • HTML5 Responsive Design - Media Queries (Part 2)

    • 0
    • 3
    • 3
    • 0
    • 0
    • 0
    • 0
    • 0
    • 2.45k
    Comment on it

    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:

    1. Media Display Density

    2. 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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: