What is Responsive Design

Code Playground is only enabled on larger screen sizes.

The first thing you must do when creating a responsive layout is to add the following <meta> tag in the <head> section of the webpage:

html

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

By default, when the mobile browser displays a webpage, it will first render the desktop version, and then try to scale the content down to fit the screen size.

This viewport tag tells the browser how to control the scaling of the page.

Viewport tag

width=device-width ensure that the viewport size equals the actual screen size. Without it, the webpage may be displayed at the default desktop width.

In some cases, the browser may "lie" about the screen size, especially on high-density screens. These devices often use multiple physical pixels to represent one digital pixel.

This attribute makes sure that the page is scaled correctly across all devices.

The initial-scale sets the initial zoom level when the webpage is first loaded. By setting initial-scale to 1.0 you are telling the browser that the page does not zoom.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="/styles.css">
</head>

<body>
  <p>Hello, World!</p>
</body>

</html>

Open Sandbox

Loading course content...