Ανταποκρινόμενη σχεδίαση ιστοσελίδας - Προβολή δίκτυου

Τι είναι η προβολή δίκτυου;

Πολλές ιστοσελίδες βασίζονται στην προβολή δίκτυου (grid-view), αυτό σημαίνει ότι η σελίδα διαιρείται σε αρκετές στήλες:

Η χρήση της προβολής δίκτυου είναι πολύ χρήσιμη κατά τη διάρκεια της σχεδίασης ιστοσελίδων. Αυτό διευκολύνει την τοποθέτηση στοιχείων στη σελίδα.

Οι ανταποκρινόμενες προβολές δίκτυου συνήθως έχουν 12 στήλες, συνολικό πλάτος 100% και επεκτείνουν και συρρικνώνονται όταν αλλάζει το μέγεθος του παραθύρου του προγράμματος περιήγησης.

Δημιουργία ανταποκρινόμενης προβολής δίκτυου

Ας ξεκινήσουμε τη δημιουργία μιας ανταποκρινόμενης προβολής δίκτυου.

Πρώτα, βεβαιωθείτε ότι όλα τα στοιχεία HTML έχουν box-sizing η ιδιότητα έχει οριστεί σε border-boxΑυτό διασφαλίζει ότι το συνολικό πλάτος και ύψος του στοιχείου περιλαμβάνει τα εσωτερικά περιθώρια (πληρώματα) και τα σύνορα.

Παρακαλώ προσθέστε τον παρακάτω κώδικα στο CSS:

* {
  box-sizing: border-box;
}

Παρακαλώ επισκεφθείτε το CSS Box Sizing Διαβάστε περισσότερα για την ιδιότητα box-sizing σε ένα κεφάλαιο.

Το παρακάτω παράδειγμα παρουσιάζει μια απλή ανταποκρινόμενη ιστοσελίδα που περιέχει δύο στήλες:

25%
75%

παράδειγμα

.menu {
  πλάτος: 25%;
  float: left;
}
.main {
  πλάτος: 75%;
  float: left;
}

Δοκιμάστε το Σου

Αν η ιστοσελίδα περιέχει μόνο δύο στηλές, ο παραπάνω παράδειγμα είναι καλή επιλογή.

Ωστόσο, θέλουμε να χρησιμοποιήσουμε μια ευέλικτη γέφυρα από 12 στηλές για καλύτερη ελέγχου της ιστοσελίδας.

Πρώτα, πρέπει να υπολογίσουμε το ποσοστό μιας στήλης: 100% / 12 στηλές = 8.33%.

Στη συνέχεια, δημιουργούμε μια κλάση για κάθε στήλη από τις 12, δηλαδή class="col-" και έναν αριθμό, ο οποίος καθορίζει τον αριθμό των στηλών που πρέπει να περάσει αυτή η ενότητα:

CSS:

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

Δοκιμάστε το Σου

Όλες οι στήλες αυτές πρέπει να πλανηθούν προς τα αριστερά και να έχουν εσωτερικό περιθώριο 15px:

CSS:

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

Κάθε γραμμή πρέπει να περιλαμβάνεται εντός <div> η συνολική αριθμητική των στηλών εντός του κειμένου πρέπει να είναι πάντα 12:

HTML:

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

Όλες οι στήλες εντός του κειμένου θα πλανηθούν προς τα αριστερά, απομακρύνοντας τις από το ρεύμα της σελίδας και τοποθετώντας άλλες στοιχεία, όπως αν οι στήλες δεν υπήρχαν. Για να αποφύγουμε αυτή την κατάσταση, θα προσθέσουμε στυλ καθαρισμού του ρεύματος:

CSS:

.row::after {
  content: "";
  clear: both;
  display: table;
}

θέλουμε να προσθέσουμε μερικά στυλ και χρώματα για να φαίνεται πιο όμορφο:

παράδειγμα

html {
  font-family: "Lucida Sans", sans-serif;
}
.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}
.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color :#33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
  background-color: #0099cc;
}

Δοκιμάστε το Σου

Παρακαλώ σημειώστε ότι όταν προσαρμόσετε το πλάτος του παραθύρου του προγράμματος περιήγησης σε πολύ μικρή διάσταση, η σελίδα του παραδείγματος δεν φαίνεται ιδανικά. Στο επόμενο κεφάλαιο θα μάθετε πώς να λύσετε αυτό το πρόβλημα.