Modern web development increasingly demands responsive or adaptive designs that accommodate various device screen sizes, from smartphones to desktop computers. This approach requires careful consideration of layout strategies since mobile layouts differ significantly from traditional PC layouts. A key concept to understand is that CSS pixels don't correspond directly to physical pixels on mobile devices due to high-resolution displays with smaller physical dimensions.

1. Implementing the Viewport Meta Tag

Adding the viewport meta tag to your HTML document ensures proper scaling across different devices:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

2. Using Relative Width Measurements

Avoid fixed pixel widths in favor of flexible percentages:

.container {
  width: auto;
  max-width: 100%;
}

3. Implementing Relative Font Sizing with REM Units

Set base font size to enable rem-based calculations:

html {
  font-size: 62.5%;
}

body {
  font-family: Arial, sans-serif;
  font-size: 1.4rem; /* Equivalent to 14px */
}

The 62.5% setting makes 1rem equal to 10px, simplifying unit conversions.

4. Floating Layout Approach

Use floating elements for flexible positioning:

.sidebar {
  width: 30%;
  float: left;
}

.content {
  width: 70%;
  float: right;
}

This method allows elements to stack vertically when space is limited, preventing horizontal overflow.

5. Media Queries for Conditional CSS Loading

Utilize CSS3 media queries to load device-specific styles:

<link rel="stylesheet" media="screen and (max-device-width: 600px)" href="mobile.css" />

For different screen ranges:

<link rel="stylesheet" media="screen and (min-width: 600px) and (max-width: 980px)" href="tablet.css" />

Alternative inline approach:

@import url("mobile.css") screen and (max-device-width: 600px);

6. Media Query Syntax and Applications

Media queries allow applying styles based on device characteristics:

@media (max-width: 600px) {
  .container {
    display: none;
  }
}

Key distinctions:

• max-width: Target window/screen width
• max-device-width: Target actual device screen dimensions

Example for mobile adjustments:

@media screen and (max-device-width: 400px) {
  .sidebar {
    float: none;
  }
}

7. Responsive Image Handling

Ensure images scale appropriately:

img {
  width: 100%;
  height: auto;
}

For better quality on Windows platforms:

img {
  width: 100%;
  -ms-interpolation-mode: bicubic;
}

JavaScript alternative using imgSizer.js:

addLoadEvent(function() {
  var images = document.getElementById("content").getElementsByTagName("img");
  imgSizer.collate(images);
});