המדריך הבסיסי ל-CSS ב-HTML – פרק י' – רספונסיביות

יתרון חשוב נוסף של CSS הוא היכולת לעצב דפי HTML רספונסיביים, בפרק זה של המדריך נעצב דף אינטרנט שיוכל להתאים את עצמו למגוון מכשירים בגדלים שונים.

אם תנסו להגדיל ולהקטין את החלון של הדפדפן, תוכלו להבחין כי האתר g4a הוא רספונסיבי.
כלומר שהתוכן מתאים את עצמו לגודל של החלון.
תכונה זו חשובה משום שאנשים משתמשים במחשבים בעלי מסכים העובדים ברזולוציות שונות,
או מכשירים שונים בעלי מסכים שונים (סמרטפון למשל),
ולכן יש צורך בתכונה כזו.

Media Queries

ב-media@ נשתמש על מנת להחיל סגנונות עיצוביים שונים למכשירים שונים.
ניתן להשתמש ב-media queries (שאילתות מדיה) על מנת לבדוק כל מיני דברים:

  • הרוחב והגובה של התצוגה
  • הרוחב והגובה של של תצוגת מסך המכשיר
  • אוריינטציה – למשל בסמרטפונים יש אפשרות לתצוגה רוחבית
  • רזולוציה

 

שימו לב לדוגמא הבאה שתבאר את הנושא:

<!DOCTYPE html>
<html>
<head>

    <link rel="stylesheet" href="styles.css">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>רספונסיבי HTML דף</title>

</head>
<body>        
  
    <h1>הגדל והקטן את החלון על מנת לראות שינוי בצבע הרקע</h1>

    <div class="flex-container">
      <div> </div>    
    </div>

</body>
</html>
body {
  background-color: rgb(63, 60, 56);
  color: black;
}

h1 {
  text-shadow:0 0 3px #FF0000, 0 0 5px #0000FF;
  text-align: center;
}

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  height:100%;
}

.flex-container > div {  
  background-image: radial-gradient(rgb(255,70,5), rgb(63,20,15), rgb(29,70,15));
  height: 300px;
  width: 300px;
  margin: 300px;
  padding: 20px;
}

@media screen and (max-width: 992px) {
  body {
    background-color: rgb(125, 125, 139);
    color: white;
  }
}

@media screen and (max-width: 600px) {
  body {
    background-color: rgb(255, 255, 240);
    color: black;
  }
}

בדוגמא זו יצרנו דף HTML אשר משנה את צבע הרקע בעת שינוי גודל התצוגה\חלון.
כמו כן יצרנו לשם ההמחשה אובייקט flexbox, שישנו את רוחבו בהתאם.

  • בשורות 1-4 הגדרנו את הסגנון הכללי של גוף העמוד.
  • בשורה 27 הגדרנו את שאילתת המדיה לפי רוחב מקסימלי של 992 פיקסלים.
  • בשורה 34 הגדרנו את שאילתת המדיה לפי רוחב מקסימלי של 600 פיקסלים.
  • את שינויי הצבע בגוף העמוד, הכנסנו בתוך שאילתות המדיה.

כך שלמעשה שאילתות מדיה עובדות לפי התחביר הבא:

CSS in HTML - Media Queries
CSS in HTML – Media Queries

דף אינטרנט רספונסיבי

כעת ננסה לעשות משהו יותר שימושי.
ניצור שלד אתר שיכול להתאים למגוון מכשירים:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="my_style.css">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello, World!</title>
</head>
<body>        

    <div class="header">
        <h2>האתר הרספונסיבי שלנו</h2>
        <p id="paragraph">הגדל והקטן את החלון על מנת לראות את השינוי</p>
      </div>
      
      <div class="topnav">
        <a href="#" id="link1">Link</a>
        <a href="#" id="link2">Link</a>
        <a href="#" id="link3">Link</a>
      </div>
      
      <div class="row">
        <div class="column">
          <h2>Column</h2>
          <p id="column1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. 
             Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, 
             purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
        </div>
        
        <div class="column">
          <h2>Column</h2>
          <p id="column2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
             Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, 
             eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, 
             purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
        </div>
        
        <div class="column">
          <h2>Column</h2>
          <p id="column2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
             Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, 
             eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, 
             purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
        </div>
      </div>
        
</body>
</html>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #333;
}

.header {
  background-color: #333;
  padding: 20px;
  text-align: center;
}

.topnav {
  overflow: hidden;
  background-color: rgb(110, 105, 105);
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topnav a:hover {
  background-color: rgb(146, 137, 137);
}

h2 {
  color: azure;
  text-shadow:0 0 3px #fff4f4, 0 0 5px #7e7ee2;
  font-size: xx-large;
}

#column1, #column2, #column3, #paragraph, #link1, #link2, #link3 {
  color: oldlace;
  font-family: Verdana;
  font-size: 22px;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 15px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
  .column {
    width: 100%;
  }
}

בדוגמא זו השתמשנו ב-block layout על מנת לארגן את חלקי האתר.
את שאילתת המדיה קבענו כך שהשינויים יחולו כאשר הרוחב יהיה על 600px,
אז המבנה של ה-block ישתנה כך שהפריטים יערמו אחד מעל השני:

סיכום

כעת ניתן לומר כי אנו יודעים את כל מה שאנחנו צריכים על מנת לעצב דף HTML.
במהלך פרקי המדריך למדנו על מגוון כלים ב-CSS,
מעיצוב תצורת האתר ועד אנימציות.
יש ב-CSS מגוון ענק של כלים אשר עומדים לרשותנו,
וכעת כאשר אנחנו יודעים את הבסיס,
נוכל להמשיך ולהרחיב את הידע שלנו ב-CSS בעצמנו על ידי מחקרים עצמאיים.

בהצלחה!

לקריאה מורחבת על CSS באתר הייעודי של W3C יש ללחוץ כאן.

רוצים לשתף את המדריך?

אהבתכם את המדריך? פתר לכם תקלה?

גולשים יקרים, רוב התכנים המוצגים באתר נכתבים בהתנדבות מלאה מתוך כוונה להנגיש מידע עבורכם. אם נתקלתם במדריך חינמי שפתר לכם תקלה או לימד אתכם משהו חדש שלא ידעתם, וברצונכם לתגמל את כותב המדריך או סתם להזמין אותו לכוס קפה, הינכם יותר ממוזמנים לתרום.

כתיבת תגובה

הזמינו אותי לכוס קפה
buy me coffee

אהבתכם את המדריך? פתר לכם תקלה? הזמינו את כותב המדריך לכוס קפה

גולשים יקרים, רוב התכנים המוצגים באתר נכתבים בהתנדבות מלאה מתוך כוונה להנגיש מידע עבורכם. אם נתקלתם במדריך חינמי שפתר לכם תקלה או לימד אתכם משהו חדש שלא ידעתם, וברצונכם לתגמל את כותב המדריך או סתם להזמין אותו לכוס קפה, הינכם יותר ממוזמנים לתרום.