Viewport meta tags must be added to ensure that the page is correctly rendered by mobile devices; 2. Adopt a mobile-first strategy, first design the mobile style, and then enhance the layout for tablets and desktops through min-width media queries; 3. Use percentages, rem, fr and other relative units to build streaming layouts to avoid fixed pixel values; 4. Use Flexbox or CSS Grid to achieve flexible responsive structures, such as vertical stacking navigation on the mobile side, large-screen grid layout; 5. Responsive typesetting use rem or clamp() functions to make the fonts scale with the screen; 6. Test the display effect under different screen sizes through browser developer tools and real devices to ensure no overflow or interaction problems, and ultimately realize a pure HTML/CSS responsive website without frameworks.

Creating a responsive website from scratch using CSS means building a layout that adapts smoothly to different screen sizes—desktops, tablets, and mobile phones—using only HTML and CSS. Here's how to do it step by step, focusing on practical techniques and modern best practices.

1. Set the Viewport Meta Tag (Essential First Step)

Before writing any CSS, make sure your HTML document includes the viewport meta tag in the . Without this, mobile browsers will scale your page incorrectly.

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

This tells the browser to set the width of the page to the device's screen width and set the initial zoom level to 1.

2. Use a Mobile-First Approach

Mobile-first means designing for small screens first, then enhancing the layout for larger screens using CSS media queries .

Start with base styles for mobile, then add @media queries for tablets and desktops.

 /* Base styles (mobile) */
.container {
  width: 100%;
  padding: 10px;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    width: 1000px;
  }
}

This ensures your site works well on small screens and scales up gracefully.

3. Use Fluid Layouts with Relative Units

Avoid fixed widths like px . Instead, use relative units like % , vw , rem , or fr (in CSS Grid) to create flexible layouts.

 header, main, footer {
  width: 90%;
  margin: 0 auto;
  padding: 1rem;
}

img {
  max-width: 100%; /* Ensures images scale down */
  height: auto;
}

Using max-width: 100% on images prevents them from overflowing their containers.

4. Choose a Responsive Layout Method

You have two modern CSS layout tools: Flexbox and CSS Grid . Use them to create dynamic, responsive structures.

Example: Responsive Navigation with Flexbox

 <nav class="navbar">
  <div class="logo">Logo</div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

 .navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* Allows wrapping on small screens */
  padding: 1rem;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

/* Stack nav links vertically on small screens */
@media (max-width: 767px) {
  .nav-links {
    flex-direction: column;
    text-align: center;
  }
}

Example: Responsive Grid Layout

 .grid-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1rem;
}

@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr 1fr; /* Two columns on tablet */
  }
}

@media (min-width: 1024px) {
  .grid-container {
    grid-template-columns: 1fr 2fr; /* Wider second column on desktop */
  }
}

5. Use Responsive Typography

Font sizes should also adapt. Use rem or em units and scale them with media queries.

 body {
  font-size: 1rem; /* 16px by default */
}

@media (max-width: 600px) {
  body {
    font-size: 0.875rem; /* Slightly smaller on tiny screens */
  }
}

h1 {
  font-size: 1.8rem;
}

@media (min-width: 1024px) {
  h1 {
    font-size: 2.5rem;
  }
}

Alternatively, use fluid typography with clamp() :

 h1 {
  font-size: clamp(1.5rem, 4vw, 3rem); /* Min, preferred, max */
}

6. Test Responsiveness Across Devices

Use your browser's developer tools (eg, Chrome DevTools) to toggle device modes and test various screen sizes.

• Resize the browser window manually
• Test on real devices if possible
• Check for awkward line breaks, overflow, or touch target sizes

Key Tips Recap:

• ? Always include the viewport meta tag
• ? Use mobile-first CSS with min-width media queries
• ? Use Flexbox or Grid for layouts instead of floats
• ? Use relative units ( % , rem , fr , vw )
• ? Make images responsive with max-width: 100%
• ? Test on multiple screen sizes

Building a responsive site from scratch doesn't require frameworks—just solid HTML structure and smart CSS. Start simple, test often, and layer on complexity as needed.

The above is the detailed content of How to create a responsive website from scratch using CSS?. For more information, please follow other related articles on the PHP Chinese website!