How to make responsive website via css
Posted By : Shivam Gupta | 27-Jun-2016
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
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Shivam Gupta
Shivam is a versatile UI developer with html, css, scss, js, angularjs technologies. He likes chess, cricket and reading book.