Design Web Responsiv HTML
Design-ul web responsiv presupune crearea de pagini care arată bine pe toate dispozitivele. O pagină responsivă se ajustează automat pentru dimensiuni și viewport-uri diferite de ecran.
Ce Este Design-ul Web Responsiv?
Design-ul web responsiv folosește HTML și CSS pentru a redimensiona, ascunde, micșora sau mări automat un site web, astfel încât acesta să arate bine pe toate dispozitivele, de la calculatoare de birou la tablete și telefoane.
Setarea Viewport-ului
Pentru a face un site responsiv, adaugă tag-ul <meta> pentru viewport în fiecare pagină. Acesta îi spune browserului cum să controleze dimensiunea și scalarea paginii.
Exemplu
O pagină care include tag-ul meta pentru viewport.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Design Web Responsiv</h1>
<p>Această pagină include meta tag-ul viewport, astfel încât se scalează corect pe toate dispozitivele.</p>
</body>
</html>
Imagini Responsive
Imaginile responsive se scalează frumos pentru a se potrivi cu orice dimensiune de browser. Dacă proprietatea CSS width este setată la 100%, imaginea se scalează în sus și în jos, dar poate crește mai mult decât dimensiunea sa originală. Folosirea max-width la 100% în schimb permite imaginii să se micșoreze, dar niciodată să crească peste dimensiunea sa originală.
Folosind width
O imagine cu width setat la 100%.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Img Lățime</title>
</head>
<body>
<img src="img_girl.jpg" style="width:100%;">
</body>
</html>
Folosind max-width
O imagine cu max-width setat la 100%.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Img Lățime Maximă</title>
</head>
<body>
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
</body>
</html>
Afișarea Diferitelor Imagini în Funcție de Lățimea Browserului
Elementul <picture> îți permite să afișezi imagini diferite pentru dimensiuni diferite ale ferestrei browserului.
Exemplu
Imagini diferite cu flori la lățimi diferite.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imagine Responsivă</title>
</head>
<body>
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Flori">
</picture>
</body>
</html>
Dimensiune de Text Responsivă
Dimensiunea textului poate fi setată în unități vw, ceea ce înseamnă lățimea viewport-ului, astfel încât textul urmărește dimensiunea ferestrei browserului. 1vw este 1% din lățimea viewport-ului, deci dacă viewport-ul are 50cm lățime, 1vw este 0.5cm.
Exemplu
Un titlu dimensionat în unități de lățime a viewport-ului.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Responsiv</title>
</head>
<body>
<h1 style="font-size:10vw">Salut Lume</h1>
</body>
</html>
Media Queries
Pe lângă redimensionarea textului și a imaginilor, paginile responsive folosesc adesea media queries. Cu o media query poți defini stiluri complet diferite pentru dimensiuni diferite ale browserului, cum ar fi afișarea coloanelor alăturate pe ecrane mari și stivuirea lor pe ecrane mici.
Exemplu
Coloane care se stivuiesc pe ecrane de 800px sau mai mici.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.left, .right {
float: left;
width: 20%; /* Lățimea este 20%, implicit */
}
.main {
float: left;
width: 60%; /* Lățimea este 60%, implicit */
}
/* Folosește o media query pentru a adăuga un punct de întrerupere la 800px: */
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* Lățimea este 100%, când fereastra de vizualizare este de 800px sau mai mică */
}
}
</style>
</head>
<body>
<div class="left">
<p>Meniu Stânga</p>
</div>
<div class="main">
<p>Conținut Principal</p>
</div>
<div class="right">
<p>Conținut Dreapta</p>
</div>
</body>
</html>
Pagină Web Responsivă - Exemplu Complet
O pagină web responsivă ar trebui să arate bine atât pe ecrane mari de calculator, cât și pe telefoane mobile mici.
Design Web Responsiv - Framework-uri
Toate framework-urile CSS populare oferă design responsiv. Sunt gratuite și ușor de folosit.
Bootstrap
Bootstrap este un alt framework CSS popular pentru design responsiv.
Exemplu
O pagină responsivă construită cu Bootstrap 5.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<title>Exemplu Bootstrap 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>Prima Mea Pagină Bootstrap</h1>
<p>Redimensionează această pagină responsivă pentru a vedea efectul!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Coloana 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col-sm-4">
<h3>Coloana 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col-sm-4">
<h3>Coloana 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</body>
</html>