Cum să faci un site responsive pentru mobile — Media Queries și Viewport
In this tutorial, you'll learn about Cum să faci un site responsive pentru mobile. We cover key concepts, practical examples, and best practices.
În acest ghid rapid vei învăța cum să transformi un site web într-unul responsive pentru mobile, folosind media queries, meta viewport și elemente de design adaptiv.
The Problem
Site-urile care nu sunt responsive oferă o experiență proastă pe mobile: text prea mic, butoane greu de apăsat, layout spart și scroll orizontal. Utilizatorii părăsesc site-ul în câteva secunde.
The Wrong Way
<!-- Fără viewport — browserul afișează desktop view -->
<html>
<head>
<title>Site-ul Meu</title>
</head>
The Right Way
<!DOCTYPE html>
<html lang="ro">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Site Responsiv</title>
<style>
body { font-size: 16px; margin: 0; }
@media (max-width: 768px) {
.sidebar { display: none; }
.content { width: 100%; padding: 10px; }
}
@media (max-width: 480px) {
body { font-size: 14px; }
.nav-menu { flex-direction: column; }
}
</style>
</head>
Output: Site-ul se adaptează automat la lățimea ecranului, cu elemente optimizate pentru atingere.
Step-by-Step Fix
1. Adaugă meta viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2. Folosește breakpoint-uri mobile-first
.container {
width: 100%;
padding: 10px;
}
@media (min-width: 768px) {
.container { max-width: 750px; margin: auto; }
}
@media (min-width: 1024px) {
.container { max-width: 960px; }
}
3. Optimizează touch target
.button, .nav-link {
min-height: 48px;
min-width: 48px;
padding: 12px 20px;
}
4. Testează pe dispozitive reale
# Folosește Chrome DevTools Device Mode sau un server local
python3 -m http.server 8000
# Accesează de pe telefon pe aceeași rețea
Prevention Tips
- Scrie CSS mobile-first (min-width) în loc de desktop-first (max-width)
- Folosește unități relative (rem, %, vw) în loc de px fixe
- Testează pe cel puțin 3 dispozitive reale înainte de lansare
- Activează scroll orizontal doar pentru tabele și galerii
Common Mistakes
- Fără meta viewport — browserul afișează zoom implicit 980px
- Butoane prea mici — sub 48x48px sunt greu de apăsat cu degetul
- Fonturi prea mici — sub 16px pe mobile forțează zoom-ul manual
- Conținut ascuns doar pe mobile — utilizatorii pierd informații importante
- Overflow orizontal — elemente care ies în afara ecranului din cauza padding-ului
FAQ
Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro. DodaTech tools integrate seamlessly with web technologies for enhanced productivity and security.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro