التصميم المستجيب HTML

التصميم المستجيب HTML

التصميم المستجيب لمواقع الويب Responsive Web Design

ما هو تصميم الويب السريع الاستجابة او Responsive Web Design؟

يعتمد تصميم الويب السريع الاستجابة على استخدام HTML وCSS لتغيير حجم موقع الويب أو إخفائه أو تقليصه أو تكبيره تلقائيًا لجعله يبدو جيدًا على جميع الأجهزة (أجهزة الكمبيوتر المكتبية والأجهزة اللوحية والهواتف).

ملاحظة: يجب أن تبدو صفحة الويب جيدة على أي جهاز!

إعداد منفذ العرض Viewport

عند إنشاء صفحات ويب متجاوبة، أضف عنصر <meta> التالي في جميع صفحات الويب الخاصة بك:

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

سيؤدي هذا إلى تعيين إطار العرض لصفحتك، والذي سيعطي المتصفح تعليمات حول كيفية التحكم في أبعاد الصفحة وحجمها.

صور متجاوبة Responsive Images

الصور المتجاوبة هي صور يتم قياسها جيدًا لتناسب أي حجم للمتصفح.

باستخدام خاصية العرض width

إذا تم تعيين خاصية عرض CSS إلى 100٪، فستكون الصورة متجاوبة وسترتفع لأعلى ولأسفل:

<img src="img.jpg" style="width:100%;">

لاحظ أنه في المثال أعلاه، يمكن تكبير الصورة لتكون أكبر من حجمها الأصلي. الحل الأفضل، في كثير من الحالات، هو استخدام خاصية الحد الأقصى للعرض بدلاً من ذلك.

باستخدام خاصية الحد الأقصى للعرض max-width

إذا تم تعيين الخاصية ذات العرض الأقصى على 100٪، فستتقلص الصورة إذا كان عليها ذلك، ولكن لا يتم تكبيرها أبدًا لتكون أكبر من حجمها الأصلي.

<img src="img.jpg" style="max-width:100%;height:auto;">

إظهار صور مختلفة حسب عرض المستعرض

يتيح لك عنصر الصورة <picture> تحديد صور مختلفة لأحجام نافذة المتصفح 

<picture>
  <source srcset="img_small.jpg" media="(max-width: 600px)">
  <source srcset="img_max_width.jpg" media="(max-width: 1500px)">
  <source srcset="img.jpg">
  <img src="img_s.jpg" alt="Flowers">
</picture>

حجم النص سريع الاستجابة

يمكن تعيين حجم النص بوحدة "vw"، مما يعني "عرض إطار العرض". viewport width

بهذه الطريقة سيتبع حجم النص حجم نافذة المتصفح.

<h1 style="font-size:10vw">اهلا</h1>

إطار العرض هو حجم نافذة المستعرض 1vw = 1% من عرض إطار العرض. إذا كان إطار العرض بعرض 50 سم، يكون 1vw 0.5 سم.

دروس لغة Html اخرى