נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

איך לעצב אתר רספונסיבי בעזרת CSS3?

מחבר:
בתאריך:

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

 

איך עושים את זה? באמצעות media queries, ומספר עקרונות נוספים שנסביר להלן.

כנסו לקישור כדי לראות את הקוד בפעולה:

הדגמה

 

מה זה media queries?

media query זה תקן של CSS3 שמאפשר לכלול בלוק של CSS רק במידה ומתקיימים תנאים מסוימים.

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

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

הכלל עובד בתוך הסוגריים שמגדירים שהבלוק של ה-css יפעל רק ברוחב מסך הקטן מ-600 פיקסלים.

 

הוספת breakpoints

עיקר השימוש ב-media queries הוא באתרים רספונסיביים שבהם נרצה להתאים את המראה לרוחב המסך.

כדי לעבוד עם media queries צריך לקבוע breakpoint (נקודת שבירה) שמעליה יהיה סט אחד של כללי CSS, ומתחתיה סט אחר של כללים.

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

ראו התמונות המצורפות:

מראה מעל 728px:

מראה מעל ה-breakpoint של 728px

מראה מתחת ל-728px:

מראה כשרוחב המסך קטן מ-breakpoint של 728px

ה-HTML

<html>
<head>
  <meta charset="utf-8">
  <title>מדריך עיצוב רספונסיבי</title>
</head>
<body>
  <div class="row">
    <div class="col no-float">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor  
     </div>
   </div>
        
   <div class="row">
     <div class="col col-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
     </div>

     <div class="col col-middle">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
    </div>

    <div class="col col-right">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est
    </div>
  </div>
        
  <div class="clearfix"></div>

  <div class="row not-mobile">
    <div class="col no-float">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor  
    </div>
  </div>
        
  <div class="row only-mobile">
    <div class="col no-float center">
      <img src="phone-number.jpg" class="responsive-img">
    </div>
  </div>
</body>

 

ה-css


.row{
  width: 98%;
  margin: 15px 1%;
  display: block;
  clear: both
}
        
.col {
  float: right;
  background: #fff;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 20px
}

.col-right,.col-left{
  width: 20%
}

.col-middle{
  width: 58%
}

.col-middle,.col-left{
  margin-left: 1%
}

@media only screen and (max-width: 728px) {       
  .col {
    width: 100%;
    margin-bottom:20px;
  }  
}

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

 

ה-breakpoints הכי חשובים

ה-breakpoints הכי חשובים הם:

  • 600px — רוחב מקסימלי למסכי טלפונים ניידים.
  • 728px — רוחב מקסימלי למסכי טאבלטים.

 

הצגה והסתרה של אלמנטים

אחד הטריקים היותר נפוצים הוא הצגה והסתרה של אלמנטים ברוחב השונה של מסכים.

הקוד הבא מציג ומסתיר דיבים ברוחב מסך נמוך מ-600 פיקסלים. דיבים ששייכים לקלאס only-mobile יוצגו רק ברוחב מסך קטן מ-600, ודיבים ששיכים לקלאס no-mobile יוסתרו ברוחב נמוך מ-600.

ה-css:

@media only screen and (max-width: 600px) {
  .not-mobile {
    display: none;
  }
            
  .only-mobile {
    display: block;
  }
}

 

תמונה רספונסיבית

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

.responsive-img{
  max-width: 100%;
  height: auto
}

 

קוד ה-css המלא

body{             
  background: #3879d9;
}
    
.row{
  width: 98%;
  margin: 15px 1%;
  display: block;
  clear: both
}
        
.col {
  float: right;
  background: #fff;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 20px
}

.col-right,.col-left{
  width: 20%
}

.col-middle{
  width: 58%
}

.col-middle,.col-left{
  margin-left: 1%
}

.no-float{
  float: none
}

.clearfix{
  float: none
}

.center{
  text-align: center
}
        
.only-mobile {
  display: none;
}

.responsive-img{
  max-width: 100%;height: auto
}
        
.clearfix{
  clear:both;
  line-height:0;
  height:0
}
        
@media only screen and (max-width: 728px) {        
  .col {
    width: 100%;
    margin-bottom:20px;
  }  
}
        
@media only screen and (max-width: 600px) {
  .not-mobile {
    display: none;
  }
            
  .only-mobile {
    display: block;
  }
}

 

לכל מדריכי ה-CSS3

הוסף תגובה חדשה

 

= 3 + 4