How to make your Website Responsive?

To making a website responsive is to make it visible properly in all the devices and screen resolutions like iPhones, iPads and Desktops etc. That a website will adjust its backgrounds and other stuff for different devices resolutions. As we have to cope with 240 x 320 for smart phones, 320 x 480 for iPhone, 480 x 640 for small tablets, 768 x 1024 for iPads and 1024 x 768 for iPad - Landscape they all should show a website properly and in fluid display(auto-resizeable).

We can manage things using CSS3 media queries and some properties. First we can test our website for all latest devices on Studio Press.

Responsive Web Designs are always fluid to be automatically adjusted in all Devices.

What is the Media Query?

 A media query consists of a media type and an expression to check for certain conditions of a particular media feature. The most important property of media is width.

By restricting CSS rules to specific width for a particular device can fix the website pages to the devices like notebooks, iPhones, iPads and Desktop PCs.

In the example below, in order for the rule to be applied, the browser must meet two conditions:

* The media type must be “screen”
* The minimum width of that screen has to be at least 1024px

Any browser that meets both of the conditions will have the css style font-size: 100% applied to the body class, like so:

@media screen and (min-width: 1024px) {
  #background {
    -web-kit-background-size:1500px 1600px;
    background-size:1500px 1600px;
    font-size: 100%;
  }
}

Perhaps this is most preferred way to make your website responsive, however it can also be achieved through Jquery standards.

Depending on the identity of your target device, you can vary the conditions and results.
Sometimes like in the example above - you’re dealing with a large number of possible identities, and your conditions can hit them all. Or, you can get a little more selective in your tests.

For example, you can target a particular mobile device and set different styles to render within in it depending on whether the device is being held in landscape or portrait mode.

You can chain those different conditions together like so:

@media screen and (min-device-width: 480px) and (orientation: landscape) {
  body {
    font-size: 100%;
  }
}

Targeting Specific Devices

Sometimes you should know the exact identity of your target device and you require specific things to happen when your website loads within it.

You know that it has a specific pixel ratio and uses a specific browser. With those specs in mind, we can set specific conditions to match that particular phone like so:

 @media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
  body {
    font-size: 90%;
  }
}

Here are sample snippets of CSS that you can use to target specific mobile devices:

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
 
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
 
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
 
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
 
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
 
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
 
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
 
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}