HTML Responsive
يتم استخدام تصميم الويب المتجاوب (Responsive) لجعل صفحة الويب الخاصة بك تظهر مناسبة وجيدة وموضعًا جيدًا على جميع الأجهزة (سطح المكتب ، التابلت ، الهاتف الذكي ، إلخ.)
لماذا نستخدم تصميم الويب المتجاوب؟
يتم استخدام تصميم الويب المتجاوب (Responsive) لجعل صفحة الويب الخاصة بك تظهر مناسبة وجيدة وموضعًا جيدًا على جميع الأجهزة (سطح المكتب ، التابلت ، الهاتف الذكي ، إلخ.)
يستخدم تصميم الويب سريع الاستجابة HTML و CSS لتغيير حجم المحتوى أو إخفائه أو تصغيره أو تكبيره أو نقله، يجعل المحتوى يظهر بشكل متجاوب على أي شاشة.
كيفية جعل محتوى الموقع متجاوب؟
إعداد الـ viewport
لإنشاء موقع ويب سريع الاستجابة ، أضف وسم الـ <meta> التالي إلى جميع صفحات الويب الخاصة بك:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
💡 عندما تضع الكود السابق فى صفحات الويب الخاصة بك سيتم تعيين إطار عرض لصفحاتك ، والذي سيعطي تعليمات المتصفح حول كيفية التحكم في أبعاد الصفحة وقياسها.
كيفية جعل الصور متجاوبة؟
تُعرف الصور التي يمكن تحجيمها بشكل جيد لتناسب أي حجم متصفح باسم الصور المتجاوبة (Responsive).
باستخدام خاصية الـ width قم بتعيين قيمتها إلى 100٪ لجعل الصورة تستجيب وتتوسع لأعلى ولأسفل.
مثال للتوضيح:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<img src="img.jpg" style="width:100%;">
</body>
</html>
{Outputs} الكود السابق:
💡 ملاحظة: هناك مشكلة في الطريقة السابقة (width: 100٪) وهي أنه يمكن تكبير الصورة لتكون أكبر من حجمها الأصلي، لذلك من الأفضل استخدام خاصية max-width بدلاً من ذلك.
باستخدام خاصية max-width
هذه الطريقة هي الأفضل والأكثر استخدامًا لأنها تسهل تصغير الصورة إذا لزم الأمر ، ولكن لا يتم تكبيرها أبدًا لتكون أكبر من حجمها الأصلي.
مثال للتوضيح:
<img src="img.jpg" style="max-width:100%;height: auto;">
{Outputs} الكود السابق:
تغيير الصور حسب عرض المتصفح
باستخدام عنصر <picture> في HTML ، يمكنك تعيين صورتين أو أكثر وفقًا لعرض المتصفح، سيتم تغيير الصورة عند تغيير حجم المتصفح.
مثال للتوضيح:
<picture>
<source srcset="img.jpg" media="(max-width: 500px)">
<source srcset="img.jpg" media="(max-width: 1500px)">
<source srcset="images.jpg">
<img src="img.jpg" alt="Flowers" style="width:auto;">
</picture>
{Outputs} الكود السابق:
كيفية جعل حجم النص المتجاوب؟
يمكننا جعل حجم النص متجاوب باستخدام وحدة “uv (يعني عرض الـ viewport-width)”، باستخدام هذا ، يمكننا جعل حجم النص يتبع شاشة نافذة المتصفح.
مثال للتوضيح:
<h2 style="font-size:10vw;">Hello World!</h2>
<p>Resize the browser window to see how the text size changes.</p>
{Outputs} الكود السابق:
Hello World!
Resize the browser window to see how the text size changes.
💡 Viewport هو حجم نافذة المتصفح، 1vw = 1٪ من عرض الـ viewport، إذا كان عرض الـ viewport يساوى 50cm ، يكون 1vw هو 0.5cm.
طرق أخرى لجعل موقعك متجاوب
1) Media Query
يمكننا أيضًا استخدام media query لإنشاء مواقع ويب سريعة الاستجابة، للتعرف على الـ media query بالتفصيل عن طريق هذه السلسة: Media Query.
2) Frameworks
يمكننا أيضًا استخدام أطر عمل لإنشاء مواقع ويب سريعة الاستجابة، مثل إطار البوتستراب، للتعرف على الإطار بالتفصيل عن طريق هذه السلسة: Bootstrap.
الإبلاغ عن خطأ
×إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:
info@albashmoparmeg.com
شكرًا لك على مساعدتك لنا!