Design web responsiv în CSS

Introducere în design-ul web responsiv

O pagină construită cu design web responsiv arată bine pe fiecare dispozitiv pe care ajunge.

Pentru asta, design-ul se ajustează automat la fereastra de vizualizare și la dimensiunea ecranului folosite.

Cea mai bună experiență pentru toți utilizatorii

O pagină web poate fi deschisă pe un computer desktop, pe o tabletă sau pe un telefon mobil.

Oricare ar fi dispozitivul ales de vizitator, pagina trebuie să fie ușor de utilizat și să arate în continuare bine.

Folosind HTML și CSS, un design responsiv redimensionează, ascunde, micșorează sau mărește automat un site web pentru a se potrivi tuturor dispozitivelor.

Se bazează pe trei componente cheie:

Eticheta <meta> viewport
Aspect flexibil (grid și flex)
Media queries

Exemplu

Pe desktop, acest aspect de pagină folosește o grilă cu mai multe coloane, iar pe ecrane mai mici devine o singură coloană.

Creați o pagină web responsivă cu un antet, un meniu lateral, conținut principal, o bară laterală de fapte și un subsol folosind CSS Grid. Folosiți media queries pentru a stivui aspectul într-o singură coloană pe ecrane mai mici de 600px și pentru a afișa un aspect cu două coloane pe ecrane între 600px și 768px.

> Rezultat: pagină HTML completă

Prompt

Creați o pagină web responsivă cu un antet, un meniu lateral, conținut principal, o bară laterală de fapte și un subsol folosind CSS Grid. Folosiți media queries pentru a stivui aspectul într-o singură coloană pe ecrane mai mici de 600px și pentru a afișa un aspect cu două coloane pe ecrane între 600px și 768px.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
}

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

.header {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}

.menu {
  background-color: #999;
  padding: 10px;
}

.menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.menu li {
  padding: 8px;
  color: white;
}

.content {
  padding: 20px;
}

.facts {
  background-color: #ddd;
  padding: 20px;
}

.footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}

/* Medium screens */
@media (min-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr 1fr;
  }
  .header, .footer {
    grid-column: 1 / -1;
  }
}

/* Large screens */
@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: 150px 1fr 1fr;
  }
  .header, .footer {
    grid-column: 1 / -1;
  }
}
</style>
</head>
<body>

<div class="grid-container">
  <div class="header"><h1>Chania</h1></div>
  <div class="menu">
    <ul>
      <li>The Flight</li>
      <li>The City</li>
      <li>The Island</li>
      <li>The Food</li>
    </ul>
  </div>
  <div class="content">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete.</p>
    <p>The city can be divided in two parts, the old town and the modern city. The old town is situated next to the old harbour and is the matrix around which the whole urban area was developed.</p>
    <p>Chania lies along the north west coast of the island Crete.</p>
  </div>
  <div class="facts">
    <h2>Facts:</h2>
    <ul>
      <li>Chania is a city on the island of Crete</li>
      <li>Crete is a Greek island in the Mediterranean Sea</li>
    </ul>
  </div>
  <div class="footer"><p>Resize the browser window to see the responsive effect.</p></div>
</div>

</body>
</html>