Responsive disain on see, kui veebileht kohandub ekraani laiuse ja kõrgusega, ehk see sõltub nendest. Tänu sellele on seda oluliselt lihtsam hooldada kui adaptive-disaini.
Adaptive disain tähendab, et veebilehel on eraldi versioonid erinevate seadmete jaoks – täpsemalt öeldes luuakse eraldi maketid telefoni, tahvelarvuti ja arvuti jaoks. Seda on keerulisem hooldada.
Allpool näitan tabelit nende erinevuste ning nende plusside ja miinustega.
| Responsive disain | Adaptive disain |
|---|---|
| Üks paindlik makett | Mitu eraldi maketti |
| Kohandub sujuvalt ekraani laiuse ja kõrgusega | Laeb kindla maketi vastavalt seadmele |
| Kasutab CSS media queries ja paindlikke grid-süsteeme | Põhineb kindlatel ekraanisuurustel (nt telefon, tahvel, arvuti) |
| Lihtsam hooldada | Keerulisem hooldada |
| Sobib hästi uutele ja erineva suurusega seadmetele | Võimaldab täpsemat kontrolli iga seadme üle |
| Võib laadida mõnikord rohkem ressursse kui vaja | Saab optimeerida iga seadme jaoks eraldi |
Responsive disain
.container {
display: flex;
}
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
Adaptive disain
/* Desktop */
@media (min-width: 1024px) {
body { background: lightblue; }
}
/* Telefon */
@media (max-width: 600px) {
body { background: lightgreen; }
}
Ülal oli näidatud nende kahe disaini koodi erinevus.
Minu arvates on nii Responsive disain kui ka Adaptive disain omal moel head. Siin tuleb arvestada, mida sul täpselt vaja on.
Kui oluline on veebilehe kiirus, siis võib Adaptive disain olla parem valik, sest seda saab täpsemalt kohandada iga seadme jaoks eraldi. Kui see ei ole nii oluline, siis on lihtsam kasutada Responsive disaini.
Minu puhul on parem teine variant.
@media (max-width: 900px) {
nav ul { flex-direction: column; }
nav ul li { width: 100%; }
.nav-link { border-right: none; border-bottom: 1px solid white; text-align: center; }
}
Navigeerimine muutub väikestel ekraanidel vertikaalseks
Selgitus:
- Menüürida muutub horisontaalsest vertikaalseks
- Lingid venivad kogu ekraani laiusele
- Seda lahendust kasutasime meie index.html lehel
Samuti on üleval ekraanipildid erinevatest seadmetest, mis näitavad, kuidas leht kohandub telefonis, tahvelarvutis ja arvutis.