Responsive | Adaptive |
@media (max-width: 768px) { body { font-size: 14px; } } Tutorials Point Tutorials Point sai alguse ideest, et on olemas lugejate klass, kes reageerivad veebisisule paremini ja eelistavad õppida uusi oskusi omas tempos oma elutubade mugavusest. Android Android on avatud lähtekoodiga ja Linuxil põhinev operatsioonisüsteem mobiilseadmete jaoks, nagu nutitelefonid ja tahvelarvutid. Androidi töötasid välja Open Handset Alliance, mida juhib Google ja teised ettevõtted. CSS Kaskaadstiilitabelid, mida hellitavalt nimetatakse CSS-iks, on lihtne kujunduskeel, mille eesmärk on lihtsustada veebilehtede esinduslikuks muutmise protsess. Java Java on kõrgetasemeline programmeerimiskeel, mille algselt töötas välja Sun Microsystems ja mis ilmus 1995. aastal. Java töötab erinevatel platvormidel, nagu Windows, Mac OS ja UNIX-i erinevad versioonid. See õpetus annab täieliku ülevaate Javast. | /* Põhistiilid kõigile seadmetele */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; line-height: 1.6; } header { background-color: #4CAF50; color: white; text-align: center; padding: 1rem; } main { padding: 1rem; } .content { display: flex; flex-direction: column; /* Vaikimisi paigutus mobiilseadmetel / align-items: center; / Keskusta sisu */ } .text { margin-bottom: 1rem; } .image img { max-width: 100%; /* Pilt on responsiivne / height: auto; / Säilitab proportsioonid */ } /* Meediapäring tahvlite ja suuremate seadmete jaoks / @media (min-width: 600px) { .content { flex-direction: row; / Vaheta rea paigutusele suurematel ekraanidel / justify-content: space-between; / Jaota esemed ühtlaselt */ } .text { flex: 1; /* Luba tekstil võtta saadaval olev ruum / margin-right: 1rem; / Lisa vahe tekstile ja pildile */ } .image { flex: 1; /* Luba pildil võtta saadaval olev ruum */ } } /* Meediapäring suurte lauaarvutite jaoks / @media (min-width: 900px) { header { padding: 2rem; / Suurenda täidist suuremate ekraanide jaoks */ } main { max-width: 1200px; /* Määra maksimaalne laius suuremate ekraanide jaoks / margin: auto; / Keskusta põhisisu */ } .content { padding: 2rem; /* Lisa sisu ümber täidist */ } } footer { text-align: center; padding: 1rem; background-color: #333; color: white; position: relative; /* Tagab, et jalus jääb allserva */ } |
Paigutus kohandub sujuvalt mis tahes ekraanisuurusega. Kasutab sageli protsendipõhiseid laiusi ja paindlikke ruudustikke. Dünaamilisem ja paindlikum tundmatute seadmete jaoks. | Kasutab teatud ekraanisuuruste jaoks etteantud katkestuspunkte. Kasutab sageli kindlate seadmete jaoks kohandatud fikseeritud paigutusi. Optimeeritud piiratud arvu seadmetüüpide jaoks. |
Esimene pilt: | Teine pilt: |
https://glebsotsjov23.thkit.ee/index.html


Kokkuvõte: Responsive disain on parem, sest sait ise kohandub mis tahes ekraaniga – telefoni, tahvelarvuti või arvutiga. See on kasutajatele mugav, sest kõige nägemiseks pole vaja lehte sisse ega välja suumida.
Erinevalt teistest valikutest, kus saidi erinevad versioonid tehakse erinevatele seadmetele, töötab tundlik disain korraga. See on lihtsam ja odavam, kuna pole vaja toetada saidi mitut versiooni. Ja selline sait on parem ka Interneti-otsingus.