Responsive Web Design Εισαγωγή

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Τι είναι το Responsive Web Design;

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

Το Responsive web design χρησιμοποιεί μόνο HTML και CSS.

Το Responsive web design δεν είναι πρόγραμμα ή JavaScript.

Σχεδιασμός για την καλύτερη εμπειρία για όλους τους χρήστες

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

Οι ιστοσελίδες δεν πρέπει να αφήνουν πληροφορίες για να ταιριάζουν σε μικρότερες συσκευές, αλλά να προσαρμόζουν το περιεχόμενό τους ώστε να ταιριάζει σε οποιαδήποτε συσκευή:



Desktop

Tablet

Phone

Ονομάζεται responsive web design όταν χρησιμοποιείτε CSS και HTML για να αλλάξετε το μέγεθος, να αποκρύψετε, να συρρικνώσετε, να μεγεθύνετε ή να μετακινήσετε το περιεχόμενο ώστε να φαίνεται καλό σε οποιαδήποτε οθόνη.

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

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

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

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;
}

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .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) {
  /* For desktop: */
  .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%;}
}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class="row">
  <div class="col-3 col-s-3 menu">
    <ul>
      <li>The Flight</li>
      <li>The City</li>
      <li>The Island</li>
      <li>The Food</li>
    </ul>
  </div>

  <div class="col-6 col-s-9">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
  </div>

  <div class="col-3 col-s-12">
    <div class="aside">
      <h2>What?</h2>
      <p>Chania is a city on the island of Crete.</p>
      <h2>Where?</h2>
      <p>Crete is a Greek island in the Mediterranean Sea.</p>
      <h2>How?</h2>
      <p>You can reach Chania airport from all over Europe.</p>
    </div>
  </div>
</div>

<div class="footer">
  <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>