לדלג לתוכן

1.7 עיצוב רספונסיבי פתרון

פתרון תרגול עיצוב רספונסיבי

תרגיל 1 - הפיכת עמוד דסקטופ לרספונסיבי

ראשית, מוסיפים את תגית viewport ל-head ב-HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

ואז מוסיפים את ה-media queries הבאים ל-CSS הקיים:

/* tablet - up to 768px */
@media (max-width: 768px) {
  .content {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
  }

  .cards {
    flex-wrap: wrap;
  }

  .card {
    flex: 1 1 calc(50% - 10px);
  }
}

/* mobile - up to 480px */
@media (max-width: 480px) {
  .header {
    flex-direction: column;
    gap: 15px;
    padding: 15px;
    text-align: center;
  }

  .header nav {
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }

  .content {
    padding: 15px;
    gap: 15px;
  }

  .cards {
    flex-direction: column;
  }

  .card {
    flex: 1 1 100%;
  }
}
  • בטאבלט: ה-content עובר ל-flex-direction: column כך שה-sidebar יופיע מעל ה-main
  • ה-sidebar מקבל width: 100% כדי לתפוס את כל הרוחב
  • הכרטיסים עם flex-wrap: wrap ו-flex: 1 1 calc(50% - 10px) נערכים ב-2 עמודות
  • במובייל: גם ה-header עובר לאנכי, הכרטיסים בעמודה אחת, וה-padding מצטמצם

תרגיל 2 - עמוד mobile-first

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mobile First Page</title>
</head>
<body>

<header class="header">
  <div class="logo">MyBrand</div>
  <nav class="nav">
    <a href="#">home</a>
    <a href="#">about</a>
    <a href="#">services</a>
    <a href="#">contact</a>
  </nav>
</header>

<section class="hero">
  <h1>Welcome to our site</h1>
  <p>We build amazing digital experiences</p>
  <button class="cta-btn">Get Started</button>
</section>

<section class="services">
  <h2>Our Services</h2>
  <div class="services-grid">
    <div class="service-card">
      <h3>Web Design</h3>
      <p>Beautiful, modern websites.</p>
    </div>
    <div class="service-card">
      <h3>Development</h3>
      <p>Clean, efficient code.</p>
    </div>
    <div class="service-card">
      <h3>SEO</h3>
      <p>Get found online.</p>
    </div>
    <div class="service-card">
      <h3>Marketing</h3>
      <p>Grow your audience.</p>
    </div>
  </div>
</section>

<section class="about">
  <div class="about-content">
    <div class="about-text">
      <h2>About Us</h2>
      <p>We are a team of passionate developers and designers creating digital solutions. Our mission is to help businesses succeed online with modern, responsive, and fast websites.</p>
    </div>
    <div class="about-image">
      <img src="https://picsum.photos/600/400" alt="about us">
    </div>
  </div>
</section>

<footer class="footer">
  <div class="footer-grid">
    <div class="footer-col">
      <h4>Company</h4>
      <a href="#">About</a>
      <a href="#">Careers</a>
      <a href="#">Blog</a>
    </div>
    <div class="footer-col">
      <h4>Support</h4>
      <a href="#">Help Center</a>
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
    </div>
    <div class="footer-col">
      <h4>Contact</h4>
      <a href="#">Email</a>
      <a href="#">Phone</a>
      <a href="#">Address</a>
    </div>
  </div>
  <p class="copyright">All rights reserved 2026</p>
</footer>

</body>
</html>

/* reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

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

/* ===== MOBILE (default) ===== */

.header {
  background: #1a1a2e;
  color: white;
  padding: 15px 20px;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav a {
  color: #ccc;
  text-decoration: none;
  padding: 5px 0;
}

.hero {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  color: white;
  padding: 60px 20px;
  text-align: center;
}

.hero h1 {
  font-size: 2rem;
  margin-bottom: 15px;
}

.cta-btn {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 12px 30px;
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 15px;
}

.services {
  padding: 40px 20px;
}

.services h2 {
  text-align: center;
  margin-bottom: 30px;
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.service-card {
  background: #f5f5f5;
  padding: 25px;
  border-radius: 8px;
  text-align: center;
}

.about {
  padding: 40px 20px;
  background: #ecf0f1;
}

.about-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about-image img {
  border-radius: 8px;
}

.footer {
  background: #1a1a2e;
  color: white;
  padding: 40px 20px;
}

.footer-grid {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-bottom: 30px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-col a {
  color: #aaa;
  text-decoration: none;
}

.copyright {
  text-align: center;
  color: #666;
  border-top: 1px solid #333;
  padding-top: 20px;
}

/* ===== TABLET (600px+) ===== */

@media (min-width: 600px) {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .logo {
    margin-bottom: 0;
  }

  .nav {
    flex-direction: row;
    gap: 20px;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero h1 {
    font-size: 2.5rem;
  }
}

/* ===== DESKTOP (1024px+) ===== */

@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .about-content {
    flex-direction: row;
    align-items: center;
  }

  .about-text {
    flex: 1;
  }

  .about-image {
    flex: 1;
  }

  .footer-grid {
    flex-direction: row;
    justify-content: space-between;
  }

  .hero h1 {
    font-size: 3rem;
  }

  .hero {
    padding: 100px 40px;
  }
}
  • התחלנו מעיצוב מובייל: הכל בעמודה אחת, מינימום מורכבות
  • בטאבלט: הניווט הופך לאופקי, הכרטיסים ב-2 עמודות
  • בדסקטופ: כרטיסים ב-4 עמודות, טקסט + תמונה זה ליד זה, footer ב-3 עמודות
  • כל media query מוסיף מורכבות, לא מורידה

תרגיל 3 - רשת כרטיסים רספונסיבית

<div class="card-grid">
  <div class="card">
    <img src="https://picsum.photos/400/250?random=1" alt="card image">
    <div class="card-body">
      <h3>Card Title 1</h3>
      <p>This is a short description of the card content. It can vary in length between cards.</p>
      <button class="card-btn">Learn More</button>
    </div>
  </div>
  <div class="card">
    <img src="https://picsum.photos/400/250?random=2" alt="card image">
    <div class="card-body">
      <h3>Card Title 2</h3>
      <p>A brief description.</p>
      <button class="card-btn">Learn More</button>
    </div>
  </div>
  <div class="card">
    <img src="https://picsum.photos/400/250?random=3" alt="card image">
    <div class="card-body">
      <h3>Card Title 3</h3>
      <p>This card has a longer description to demonstrate how the flex-grow property works to push the button down.</p>
      <button class="card-btn">Learn More</button>
    </div>
  </div>
  <div class="card">
    <img src="https://picsum.photos/400/250?random=4" alt="card image">
    <div class="card-body">
      <h3>Card Title 4</h3>
      <p>Another card with some text.</p>
      <button class="card-btn">Learn More</button>
    </div>
  </div>
  <div class="card">
    <img src="https://picsum.photos/400/250?random=5" alt="card image">
    <div class="card-body">
      <h3>Card Title 5</h3>
      <p>Short text here.</p>
      <button class="card-btn">Learn More</button>
    </div>
  </div>
  <div class="card">
    <img src="https://picsum.photos/400/250?random=6" alt="card image">
    <div class="card-body">
      <h3>Card Title 6</h3>
      <p>The last card in our responsive grid example.</p>
      <button class="card-btn">Learn More</button>
    </div>
  </div>
</div>

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 600px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-body h3 {
  margin: 0 0 10px;
}

.card-body p {
  margin: 0 0 15px;
  color: #666;
  flex-grow: 1;
}

.card-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  align-self: flex-start;
}

.card-btn:hover {
  background: #2980b9;
}
  • flex-grow: 1 על הפסקה דוחף את הכפתור לתחתית הכרטיס
  • flex-grow: 1 על card-body גורם לכל הכרטיסים להיות באותו גובה
  • max-width: 1200px עם margin: 0 auto ממרכז ומגביל את רוחב הגריד
  • object-fit: cover מוודא שהתמונות לא מעוותות

תרגיל 4 - ניווט רספונסיבי

<nav class="navbar">
  <div class="nav-brand">MyLogo</div>
  <input type="checkbox" id="nav-toggle" class="nav-checkbox">
  <label for="nav-toggle" class="nav-hamburger">&#9776;</label>
  <ul class="nav-menu">
    <li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">services</a></li>
    <li><a href="#">portfolio</a></li>
    <li><a href="#">blog</a></li>
    <li><a href="#" class="nav-cta">contact us</a></li>
  </ul>
</nav>

.navbar {
  background: #1a1a2e;
  padding: 15px 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.nav-brand {
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
}

.nav-checkbox {
  display: none;
}

.nav-hamburger {
  color: white;
  font-size: 1.8rem;
  cursor: pointer;
  display: block;
}

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  flex-direction: column;
  width: 100%;
  padding-top: 15px;
}

.nav-checkbox:checked ~ .nav-menu {
  display: flex;
}

.nav-menu li a {
  color: #ccc;
  text-decoration: none;
  padding: 12px 0;
  display: block;
  border-bottom: 1px solid #2c2c4e;
}

.nav-menu li a:hover {
  color: white;
}

.nav-cta {
  background: #e74c3c;
  color: white !important;
  padding: 10px 20px !important;
  border-radius: 5px;
  text-align: center;
  margin-top: 10px;
  border: none !important;
}

@media (min-width: 768px) {
  .nav-hamburger {
    display: none;
  }

  .nav-menu {
    display: flex;
    flex-direction: row;
    width: auto;
    padding-top: 0;
    gap: 25px;
    align-items: center;
  }

  .nav-menu li a {
    padding: 5px 0;
    border-bottom: none;
  }

  .nav-cta {
    margin-top: 0;
    padding: 8px 20px !important;
  }
}
  • ה-checkbox מוסתר ב-display: none אבל עדיין פונקציונלי
  • ה-label עם for="nav-toggle" מקושר ל-checkbox - לחיצה עליו מסמנת אותו
  • הסלקטור .nav-checkbox:checked ~ .nav-menu מציג את התפריט כשה-checkbox מסומן
  • בדסקטופ: ה-hamburger נעלם, התפריט תמיד מוצג אופקית

תרגיל 6 - טיפוגרפיה רספונסיבית עם clamp

<div class="typo-page">
  <h1>Main Heading - Responsive Typography</h1>
  <h2>Secondary Heading</h2>
  <h3>Tertiary Heading</h3>
  <p>This is body text. It should be comfortable to read on any screen size. The font size adjusts smoothly as you resize the browser window, without any sudden jumps at breakpoints.</p>
  <p class="small-text">This is small text, used for captions, footnotes, and other secondary information.</p>
</div>

:root {
  --heading-1: clamp(2rem, 5vw, 4rem);
  --heading-2: clamp(1.5rem, 3.5vw, 2.5rem);
  --heading-3: clamp(1.2rem, 2.5vw, 1.8rem);
  --text-body: clamp(1rem, 1.5vw, 1.2rem);
  --text-small: clamp(0.8rem, 1.2vw, 0.9rem);

  --spacing-section: clamp(30px, 5vw, 80px);
  --spacing-element: clamp(10px, 2vw, 25px);
}

.typo-page {
  max-width: clamp(300px, 85%, 900px);
  margin: 0 auto;
  padding: var(--spacing-section);
}

h1 {
  font-size: var(--heading-1);
  margin-bottom: var(--spacing-element);
  line-height: 1.2;
}

h2 {
  font-size: var(--heading-2);
  margin-bottom: var(--spacing-element);
  line-height: 1.3;
}

h3 {
  font-size: var(--heading-3);
  margin-bottom: var(--spacing-element);
  line-height: 1.3;
}

p {
  font-size: var(--text-body);
  margin-bottom: var(--spacing-element);
  line-height: 1.6;
}

.small-text {
  font-size: var(--text-small);
  color: #666;
}
  • אין אף media query - הכל מתבצע עם clamp()
  • כל גודל פונט גדל ומתכווץ בצורה חלקה לפי רוחב המסך
  • גם ה-spacing רספונסיבי - padding ו-margin משתנים
  • max-width: clamp(300px, 85%, 900px) - רוחב המיכל עצמו רספונסיבי