Responsiivse ja adaptiivse veebidisaini võrdlu
| Parameeter | Responsiivne veebidisain | Adaptiivne veebidisain |
| Kuidas töötab | Kujundus kohandub automaatselt ekraani suurusega | Veebileht vahetab valmis kujunduste vahel |
| Kujundused | Üks paindlik kujundus | Mitu kindla suurusega kujundust |
| Ekraanidele sobivus | Sobib kõikidele ekraanisuurustele | Sobib ette määratud suurustele |
| Arendamine | Lihtsam teha ja hooldada | Keerulisem, sest versioone on mitu |
| Kasutus tänapäeval | Kasutatakse sagedamini | Kasutatakse harvem |
Minu arvamus:
Arvan, et adaptiivne disain annab sulle täpsema kontrolli veebisaidi välimuse üle erinevates seadmetes, seega teoreetiliselt on see parem. Saad luua eraldi versioonid telefonide, tahvelarvutite ja arvutite jaoks ning neid ideaalselt ekraani järgi kohandada.
Seda lähenemisviisi on aga keeruline arendada ja hallata, eriti algajate jaoks. Sa pead looma mitu paigutust ja igaüht neist jälgima.
Seetõttu on reageeriv disain algajatele arendajatele parem. See on lihtsam, võtab vähem aega ja üks veebisait töötab kõigis seadmetes.
Näidis kood:
Näide reageerivast veebidisainist
body { font-family: Arial; } .container { display: flex; gap: 20px; } .block { flex: 1; padding: 20px; background: lightblue; } /* для телефонов */ @media (max-width: 768px) { .container { flex-direction: column; } }Näide reageerivast veebidisainist
/* версия для компьютера */ .container { width: 1200px; margin: auto; } /* версия для планшета */ @media (max-width: 1024px) { .container { width: 768px; } } /* версия для телефона */ @media (max-width: 600px) { .container { width: 320px; } }Minu tulemused:
Telefon:
Tahvelarvuti:
Arvuti:
