06-responsive.html

<div class="breadcrumb">
  <span class="breadcrumb-link" onclick="loadLesson('intro')">หน้าแรก</span> / <span>Responsive Design</span>
</div>

<h2><span class="emoji">📱</span>Responsive Web Design - ทำให้เว็บทำงานบนทุกอุปกรณ์</h2>

<p>ปัจจุบัน ผู้ใช้เข้าถึงเว็บไซต์จากอุปกรณ์ต่างๆ เช่น คอมพิวเตอร์ตั้งโต๊ะ แล็ปท็อป แท็บเล็ต และสมาร์ทโฟน Responsive Web Design ช่วยให้เว็บไซต์ของคุณมีลักษณะและการทำงานที่ดีบนทุกอุปกรณ์</p>

<h3>หลักการ Responsive Design</h3>

<div class="step-card">
  <h4>1. Mobile-First Approach</h4>
  <p>ออกแบบเว็บสำหรับมือถือก่อน แล้วค่อยเพิ่มคุณสมบัติสำหรับหน้าจออื่นๆ</p>
</div>

<div class="step-card">
  <h4>2. Fluid Grids</h4>
  <p>ใช้เปอร์เซ็นต์แทนพิกเซล เพื่อให้เลย์เอาต์สามารถปรับขนาดตามขนาดหน้าจอได้</p>
</div>

<div class="step-card">
  <h4>3. Flexible Images</h4>
  <p>ใช้ CSS เพื่อให้รูปภาพสามารถปรับขนาดตามขนาดหน้าจอได้</p>
</div>

<div class="step-card">
  <h4>4. Media Queries</h4>
  <p>ใช้ CSS Media Queries เพื่อใช้ CSS ต่างกันสำหรับขนาดหน้าจอต่างๆ</p>
</div>

<h3>Viewport Meta Tag</h3>

<p>ต้องใส่ tag นี้ในส่วน &lt;head&gt; เพื่อให้เบราว์เซอร์รู้ว่าจะต้องจัดการหน้าจอของอุปกรณ์ต่างๆ อย่างไร</p>

<pre><code class="language-html">
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
</code></pre>

<h3>Media Queries</h3>

<p>Media Queries ช่วยให้คุณสามารถใช้ CSS ต่างกันสำหรับขนาดหน้าจอต่างๆ</p>

<pre><code class="language-css">
/* CSS สำหรับหน้าจอขนาดใหญ่ (Desktop) */
body {
    font-size: 16px;
}

/* CSS สำหรับหน้าจอขนาดกลาง (Tablet) */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

/* CSS สำหรับหน้าจอขนาดเล็ก (Mobile) */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
}
</code></pre>

<h3>Flexible Images</h3>

<pre><code class="language-css">
/* ทำให้รูปภาพปรับขนาดตามขนาดหน้าจอ */
img {
    max-width: 100%;
    height: auto;
}
</code></pre>

<h3>ตัวอย่าง: เว็บเพจ Responsive ง่ายๆ</h3>

<pre><code class="language-html">
&lt;!DOCTYPE html&gt;
&lt;html lang="th"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;เว็บ Responsive&lt;/title&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .card {
            background: #f0f0f0;
            padding: 20px;
            border-radius: 8px;
        }

        /* Tablet */
        @media (max-width: 768px) {
            .grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Mobile */
        @media (max-width: 480px) {
            .grid {
                grid-template-columns: 1fr;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="container"&gt;
        &lt;h1&gt;เว็บ Responsive&lt;/h1&gt;
        &lt;div class="grid"&gt;
            &lt;div class="card"&gt;
                &lt;h2&gt;การ์ด 1&lt;/h2&gt;
                &lt;p&gt;เนื้อหาของการ์ด 1&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="card"&gt;
                &lt;h2&gt;การ์ด 2&lt;/h2&gt;
                &lt;p&gt;เนื้อหาของการ์ด 2&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="card"&gt;
                &lt;h2&gt;การ์ด 3&lt;/h2&gt;
                &lt;p&gt;เนื้อหาของการ์ด 3&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<div class="tip">
  <strong>💡 เคล็ดลับ:</strong> ทดสอบเว็บไซต์ของคุณบนอุปกรณ์ต่างๆ หรือใช้ Developer Tools ของเบราว์เซอร์เพื่อจำลองขนาดหน้าจอต่างๆ
</div>

<div class="navigation">
  <button class="btn btn-primary" id="prev-btn" data-current="responsive">← ก่อนหน้า</button>
  <button class="btn btn-primary" id="next-btn" data-current="responsive">ถัดไป →</button>
</div>