Ο κώδικας-λύση και ασκήσεις (responsive & @media queries, σχετικές μονάδες, εισαγωγή JavaScript: onclick, function, DOM getElementById/innerHTML). Γλώσσες HTML5+CSS+JS.

Ο κώδικας-λύση της Εφαρμογής 16

Ερώτηση: Φτιάξτε responsive κανόνα για μικρές οθόνες και ένα κουμπί/εικόνα που αλλάζει κείμενο με JavaScript.

Απάντηση:

CSS (media query):
@media all and (max-width: 350px) {
h1 { font-size: 1.5em; }
p { font-size: 0.7em; }
}
HTML + JS:
—

Σύνοψη: (ενδεικτική) Media query (max-width:350px) για μικρές οθόνες + onclick που καλεί function, η οποία με getElementById().innerHTML αλλάζει το περιεχόμενο.

Κριτήρια αξιολόγησης:

Κριτήριο: @media με max-width + onclick→function + getElementById().innerHTML.

Προσαρμοστική σχεδίαση ΚΑΙ media queries

Ερώτηση: Τι είναι η προσαρμοστική σχεδίαση και πώς την υλοποιούμε με media queries;

Απάντηση:

Responsive: το περιεχόμενο/διάταξη προσαρμόζεται στο μέγεθος της οθόνης (κινητά, tablet, desktop).
Με @media: ορίζουμε κανόνες που ισχύουν μόνο σε συγκεκριμένο εύρος πλάτους, π.χ. @media all and (max-width: 350px) { ... } για μικρές οθόνες (με min-width/max-width).

Σύνοψη: (ενδεικτική) Responsive = προσαρμογή στο μέγεθος οθόνης. Υλοποίηση με @media (min-width/max-width) που ενεργοποιεί κανόνες ανά εύρος πλάτους.

Κριτήρια αξιολόγησης:

Κριτήριο: έννοια responsive + @media με min/max-width.

Σχετικές μονάδες

Ερώτηση: Γιατί σε μια responsive σελίδα προτιμάμε σχετικές μονάδες (%, em) αντί για pixel;

Απάντηση:

Οι σχετικές μονάδες «ρέουν» — προσαρμόζονται στο μέγεθος του γονικού/της οθόνης, ενώ τα σταθερά pixel όχι.
% = ποσοστό του γονικού· em/rem = σε σχέση με τη γραμματοσειρά. Έτσι η σελίδα φαίνεται καλά σε κάθε μέγεθος.

Σύνοψη: (ενδεικτική) Γιατί οι σχετικές μονάδες (%, em) προσαρμόζονται αυτόματα στο μέγεθος οθόνης/γονικού, ενώ τα pixel μένουν σταθερά.

Κριτήρια αξιολόγησης:

Κριτήριο: σχετικές μονάδες = ευελιξία/προσαρμογή vs σταθερά pixel.

JavaScript, γεγονότα ΚΑΙ DOM

Ερώτηση: Πώς προσθέτουμε διαδραστικότητα με JavaScript; Τι κάνουν το onclick και το getElementById;

Απάντηση:

Συνδέουμε JavaScript (π.χ. <script src="…js">) που προσθέτει δυναμική συμπεριφορά.
Η onclick ορίζει τι θα εκτελεστεί (μια συνάρτηση) όταν πατηθεί ένα στοιχείο.
Το document.getElementById("id") βρίσκει ένα στοιχείο από το id του· με .innerHTML = "…" αλλάζουμε δυναμικά το περιεχόμενό του (μέσω του DOM).

Σύνοψη: (ενδεικτική) JS (script) για διαδραστικότητα· onclick καλεί function σε κλικ· getElementById(id).innerHTML αλλάζει δυναμικά το περιεχόμενο (DOM).

Κριτήρια αξιολόγησης:

Κριτήριο: onclick→function + getElementById/innerHTML για αλλαγή περιεχομένου (DOM).

Προηγούμενο Στοιχείο

Επιστροφή στην Ενότητα

Επόμενο Στοιχείο