منهج الهاتف أولًا مقابل سطح المكتب أولًا

ما التصميم المتجاوب؟

التصميم بالبدء من الهاتف

<p style="font-size:0.85em;color:#888;margin:0 0 6px;">Narrow (default) preview — driven by the real CSS below:</p>
<nav class="nav" style="display:flex;gap:8px;background:#4f8cff11;border:1px solid #4f8cff;padding:8px;margin-bottom:16px;">
  <a href="#">Home</a><a href="#">Products</a><a href="#">About</a>
</nav>
<p style="font-size:0.85em;color:#888;margin:0 0 6px;">Static reference for the ≥768px (tablet+) row layout (not driven by the media query):</p>
<nav style="display:flex;flex-direction:row;gap:8px;background:#4f8cff11;border:1px solid #4f8cff;padding:8px;">
  <a href="#">Home</a><a href="#">Products</a><a href="#">About</a>
</nav>

التصميم بالبدء من سطح المكتب

<aside class="sidebar" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar — width: 100% below 768px (this preview is narrow, so the override is already visible)</aside>

لماذا يُفضَّل نهج الهاتف أولًا

التتابع ونهج الهاتف أولًا

استراتيجية البدء بالمحتوى

التحسين التدريجي مقابل التدهور التدريجي

أهداف اللمس مقابل النقر

<button>Tap target (min 44x44px)</button>

نمط التنقل

<p style="font-size:0.85em;color:#888;margin:0 0 6px;">Narrow (default) preview — driven by the real CSS below:</p>
<button aria-label="menu" style="margin-bottom:8px;">&#9776; Menu</button>
<div class="nav-links" style="gap:12px;background:#4f8cff11;border:1px solid #4f8cff;padding:8px;margin-bottom:16px;">
  <a href="#">Home</a><a href="#">Products</a><a href="#">About</a>
</div>
<p style="font-size:0.85em;color:#888;margin:0 0 6px;">Static reference for the ≥768px (desktop) visible nav bar (not driven by the media query):</p>
<div style="display:flex;gap:12px;background:#4f8cff11;border:1px solid #4f8cff;padding:8px;">
  <a href="#">Home</a><a href="#">Products</a><a href="#">About</a>
</div>

الخطوط وفق نهج الهاتف أولًا

<p style="font-size:0.85em;color:#888;margin:0 0 6px;">Narrow (default) preview — driven by the real CSS below:</p>
<h1>Mobile heading (1.75rem)</h1>
<p style="font-size:0.85em;color:#888;margin:16px 0 6px;">Static reference for the ≥1024px (desktop) size (not driven by the media query):</p>
<h1 style="font-size:3rem;">Desktop heading (3rem)</h1>

التخطيط المرن مقابل المتكيف

تحقق سريع

مراجعة