How to make responsive website via css

Posted By : Shivam Gupta | 27-Jun-2016

responsive websites via CSS

media-query: 
if we want to make any website completely responsive which can work perfectly on all devices, then media-query is best solution for that purpose.There are different types of devices property which we can use in our code to specify them.

Some important type of device property is given below -

(1). device-width: by using device-width property of any specific type of devices, we can assign particular css property to that devices. we can also specify min-device-width and max-device-width for specific range of devices.

ex. <link rel="stylesheet" media="screen and (max-device-width: 799px)" />

This media query will cover all devices that have maximum device width 799px.

 

(2). device-height: by using device-height property of any specific type of devices, we can assign particular css property to that devices. we can also specify min-device-height and max-device-height for specific range of devices.

ex. <link rel="stylesheet" media="screen and (max-device-height: 799px)" />

This media query will cover all devices that have maximum device height 799px.

 

(3). device-aspect-ratio: This represent the ratio between total number of horizontal pixel vs. total number of vertical pixel of any devices.

ex. <link rel="stylesheet" media="screen and (min-device-aspect-ratio: 16/9)" />

 

(4). resolution:  It represent the pixel density of any devices. it may be in either dots per inch or dots per centimeter. we can also cover specific number of devices by using min and max resolution.

ex.   <link rel="stylesheet" media="screen and (min-resolution: 300dpi)" />

 

(5). orientation: any devices can be oriented in two modes, that is landscape mode and portrait mode.we can specify specific css property so that any design may look better in both modes.

ex.   @media all and (orientation: landscape) {.....}

 

(6). color: it represent the required number of bit for specific color of any output devices. in this also we can set minimum and maximum number of bits.

 ex.  @media all and (min-color: 4) { .... }

 

(7). grid:  using this device property we can specify whether the device is grid-device or bitmap-device. 

ex.  @media handheld and (grid) and (max-width: 15em) { .... }

 

THANKS

About Author

Author Image
Shivam Gupta

Shivam is a versatile UI developer with html, css, scss, js, angularjs technologies. He likes chess, cricket and reading book.

Request for Proposal

Name is required

Comment is required

Sending message..