Απλόχερη Σχεδιασμός Ιστοσελίδας - Μέσα Εξετάσεων

Τι είναι η ερώτηση για την οθόνη;

Η ερώτηση για την οθόνη είναι μια τεχνολογία CSS που εισήχθη στο CSS3.

χρησιμοποιείται μόνο όταν πληρούνται συγκεκριμένα κριτήρια @media για να αναφέρετε το κουτί CSS 属性.

Παράδειγμα

Αν το πλάτος της θυρίδας περιήγησης είναι 600px ή μικρότερο, το χρώμα του παρασκηνίου θα είναι ανοιχτοκίτρινο:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Δοκιμάστε το Εκείνου

Προσθήκη σημείου καμπής

Πριν από λίγο στο教程, δημιουργήσαμε μια ιστοσελίδα που περιέχει γραμμές και στήλες, αλλά η αντανακλαστική ιστοσελίδα δεν φαίνεται καλά在小屏幕.

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


επιτραπέζιας υπολογιστή

τηλεφώνου

Προσθέστε σημείο καμπής με ερώτηση για την οθόνη στους 768px:

Παράδειγμα

Όταν το πλάτος της οθόνης (θυρίδα περιήγησης) είναι μικρότερο από 768px, το πλάτος κάθε στήλης πρέπει να είναι 100%:

/* Για συσκευές επιφάνειας εργασίας: */
.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%;}
@media only screen and (max-width: 768px) {
  /* Για τα κινητά: */
  [class*="col-"] {
    width: 100%;
  }
}

Δοκιμάστε το Εκείνου

Πάντα σχεδιασμός πρώτα το κινητό

Το "πρώτα το κινητό" (Mobile First) σημαίνει ότι πριν από οποιοδήποτε σχεδιασμό για τακτικά υπολογιστές ή οποιεσδήποτε άλλες συσκευές, πρέπει να προτεραιότητα ο σχεδιασμός για τα κινητά συσκευές (το οποίο θα κάνει την ιστοσελίδα να εμφανίζεται πιο γρήγορα σε μικρότερες συσκευές).

Αυτό σημαίνει ότι πρέπει να κάνουμε μερικές βελτιώσεις στο CSS.

Όταν το πλάτος είναι μικρότερο από 768px, πρέπει να τροποποιήσουμε το σχεδιασμό αντί να αλλάξουμε το πλάτος. Έτσι έχουμε κάνει τον σχεδιασμό "πρώτα το κινητό" (mobile first):

Παράδειγμα

/* Για τα κινητά: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  /* Για τα επιφανειακά: */
  .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%;}
}

Δοκιμάστε το Εκείνου

έναν άλλο σημείο καμπής

Μπορείτε να προσθέσετε όσο πολλά σημεία καμπής θέλετε.

Θα προσθέσουμε επίσης έναν σημείο καμπής μεταξύ ταμπλέτας και τηλεφώνου.


επιτραπέζιας υπολογιστή

ταμπλέτα

τηλεφώνου

Για το λόγο αυτό, προσθέσαμε μια ερώτηση για την οθόνη (στο 600 εικονοστοιχεία) και προσθέσαμε ένα σύνολο νέων κλάσεων για συσκευές με πλάτος μεγαλύτερο από 600 εικονοστοιχεία αλλά μικρότερο από 768 εικονοστοιχεία:

Παράδειγμα

Λάβετε υπόψη ότι οι δύο ομάδες κλάσεων είναι σχεδόν παρόμοιες, η μοναδική διαφορά είναι το όνομα (col- και col-s-):

/* Για τα κινητά: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 600px) {
  /* Για τα ταμπλέτα: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* Για τα επιφανειακά: */
  .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%;}
}

Δύο παρόμοια κλάσεις φαίνονται παράξενα, αλλά μας δίνει την ευκαιρία να χρησιμοποιήσουμε HTML για να αποφασίσουμε τι θα συμβεί με τις στήλες σε κάθε σημείο κατώτερης διάστασης:

Παράδειγμα HTML

Για τα προσωπικά υπολογιστές:

Η πρώτη και η τρίτη ενότητα θα καλύπτουν 3 στήλες. Η μεσαία ενότητα θα καλύπτει 6 στήλες.

Για τα ταμπλέτα:

Η πρώτη ενότητα θα καλύπτει 3 στήλες, η δεύτερη ενότητα θα καλύπτει 9 στήλες, η τρίτη ενότητα θα εμφανίζεται κάτω από τις δύο πρώτες και θα καλύπτει 12 στήλες:

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>

Δοκιμάστε το Εκείνου

Τυπικοί βραχίονες συσκευών

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

Παράδειγμα

/* Υπερμικρά συσκευές (τηλέφωνα, 600px και κάτω) */
@media only screen and (max-width: 600px) {...} 
/* Μικρά συσκευές (portrait ταμπλέτες και μεγάλα κινητά, 600 pixel και πάνω) */
@media only screen and (min-width: 600px) {...} 
/* Μεσαία συσκευές (οριζόντια ταμπλέτα, 768 pixel και πάνω) */
@media only screen and (min-width: 768px) {...} 
/* Μεγέθη συσκευών (φορητοί και σταθεροί υπολογιστές, 992px και πάνω) */
@media only screen and (min-width: 992px) {...} 
/* Υπερμεγέθη συσκευές (μεγάλα φορητά και σταθερά υπολογιστές, 1200px και πάνω) */
@media only screen and (min-width: 1200px) {...}

Δοκιμάστε το Εκείνου

Κατεύθυνση: Λευκός τύπος / Πейζα

Οι ερωτήσεις ενημέρωσης μπορούν επίσης να χρησιμοποιηθούν για να αλλάξουν τη διάταξη της ιστοσελίδας ανάλογα με την κατεύθυνση του προγράμματος περιήγησης.

Μπορείτε να ρυθμίσετε ένα σύνολο ιδιοτήτων CSS που ισχύουν μόνο όταν η πλάτος του παραθύρου του προγράμματος περιήγησης είναι μεγαλύτερο από το ύψος του, δηλαδή η κατεύθυνση "οριζόντια":

Παράδειγμα

Εάν η κατεύθυνση είναι οριζόντια μονάδα (landscape mode), το φόντο της ιστοσελίδας είναι ελαφρώς μπλε:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Δοκιμάστε το Εκείνου

Αποκάλυψη ή κρυψη στοιχείων με ερωτήσεις ενημέρωσης

Εναλλακτική χρήση των ερωτήσεων ενημέρωσης είναι η αποκάλυψη ή κρυψη των στοιχείων σε διαφορετικά μεγέθη οθόνης:

Παράδειγμα

/* Εάν το μέγεθος οθόνης είναι 600 pixel ή μικρότερο, κρύψτε το στοιχείο */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Δοκιμάστε το Εκείνου

Αλλαγή μεγέθους γραμματοσειράς με ερωτήσεις ενημέρωσης

Μπορείτε επίσης να χρησιμοποιήσετε τις ερωτήσεις ενημέρωσης για να αλλάξετε το μέγεθος του κειμένου των στοιχείων σε διαφορετικά μεγέθη οθόνης:

Παράδειγμα

/* Εάν το μέγεθος οθόνης είναι 601px ή μεγαλύτερο, ρυθμίστε το font-size του <div> σε 80px */
@media only screen and (min-width: 601px) {}}
  div.example {
    font-size: 80px;
  }
}
/* Αν το μέγεθος οθόνης είναι 600px ή μικρότερο, ρυθμίστε το font-size του <div> σε 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Δοκιμάστε το Εκείνου

Εγχειρίδιο CSS @media

Για πλήρη περιγραφή όλων των τύπων μέσων, χαρακτηριστικών/φράσεων, παρακαλώ επισκεφθείτε Δείτε το @media Κανονισμό στο CSS Εγχειρίδιο.