| Responsive | Adaptive |
| Responsive makes the site adjust the size for one device only, the site is designed for phones, but the user enters from a computer, in which case the site looks like it does on a phone. | 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/ |
Example Responsive CSS:
/* Style for mobile devices (screen width up to 600px) */
@media (max-width: 600px) {
body {
font-size: 14px;
}
.container {
padding: 10px;
}
}
/* Style for tablets (screen width from 601px to 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
body {
font-size: 16px;
}
.container {
padding: 20px;
}
}
/* Style for desktop (width of the screen is greater than 1024px) */
@media (min-width: 1025px) {
body {
font-size: 18px;
}
.container {
padding: 30px;
}
}
An example of Adaptive CSS:
/* Style for mobile devices */
html[device="mobile"] .container {
width: 100%;
padding: 10px;
}
/* Style for tablets */
html[device="tablet"] .container {
width: 80%;
padding: 20px;
}
/* Style for desktop */
html[device="desktop"] .container {
width: 60%;
padding: 30px;
}
Kokkuvõta:
Valisin adaptiivse, kuna see tundus mulle kasutajale mugavam ja meeldivam.