| Responsive | Adaptive |
| Responsive teeb nii, et sait kohandab suurust ainult ühe seadme jaoks, sait on mõeldud telefonidele, kuid kasutaja siseneb arvutist, sel juhul näeb sait välja nagu telefonis. | Adaptive võimaldab teil kohandada saiti selle seadme suurusega, millelt saiti vaadatakse, mis võimaldab kasutajal saiti mugavalt vaadata. Minu sait: https://davidlennuk23.thkit.ee/ |
Näide Responsive CSS:
/* Стиль для мобильных устройств (ширина экрана до 600px) */
@media (max-width: 600px) {
body {
font-size: 14px;
}
.container {
padding: 10px;
}
}
/* Стиль для планшетов (ширина экрана от 601px до 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
body {
font-size: 16px;
}
.container {
padding: 20px;
}
}
/* Стиль для десктопов (ширина экрана больше 1024px) */
@media (min-width: 1025px) {
body {
font-size: 18px;
}
.container {
padding: 30px;
}
}
Näide Adaptive CSS:
/* Стиль для мобильных устройств */
html[device="mobile"] .container {
width: 100%;
padding: 10px;
}
/* Стиль для планшетов */
html[device="tablet"] .container {
width: 80%;
padding: 20px;
}
/* Стиль для десктопов */
html[device="desktop"] .container {
width: 60%;
padding: 30px;
}
Kokkuvõta:
Valisin adaptiivse, kuna see tundus mulle kasutajale mugavam ja meeldivam.