How to create a completely device-compatible website

Basically I want to create web pages for multiple devices (desktop, iphone, ipad, and other smart phones that have browsers on them). I'm just beginning to learn css3 and learning css3 media queries is very confusing.

I read a few tutorials and the code below is what I came up with. Could someone please let me know if I am doing this right, or if there are any corrections that should be made?

<!DOCTYPE html>
<html lang="en-US">
  <head>

    <!-- META -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="robots" content="noodp" />
    <title>Home</title>

    <!-- CSS RESET -->
    <link rel="stylesheet" type="text/css" href="reset.css" media="all" />

    <!-- TARGET SMARTPHONES -->
    <link rel="stylesheet" type="text/css" href="" media="only screen and (min-device-width: 320px) and (max-device-width: 480px)" />
    <link rel="stylesheet" type="text/css" href="" media="only screen and (min-width: 321px)" />
    <link rel="stylesheet" type="text/css" href="" media="only screen and (max-width: 320px)" />

    <!-- IPADS -->
    <link rel="stylesheet" type="text/css" href="" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" />
    <link rel="stylesheet" type="text/css" href="" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)" />
    <link rel="stylesheet" type="text/css" href="" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)" />

    <!-- DESKTOP & LAPTOPS -->
    <link rel="stylesheet" type="text/css" href="" media="only screen and (min-width: 1224px)" />

    <!-- LARGE SCREEN -->
    <link rel="stylesheet" type="text/css" href="" media="only screen and (min-width: 1824px)" />

    <link rel="stylesheet" type="text/css" href="" media="only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5)" />

  </head>
<body>



</body>
</html>

Solution

You should add the following line to let the browser know how it should fit its content on the device's screen.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This article from html5rocks will surely help you.