انتقل إلى المحتوى

التصميم المتكيف لصفحات الويب

الفكرة

تصميم واحد يناسب الجميع.

الطريقة

السماح بتعديل عرض الصفحة تلقائيًا

أضف السطر التالي في رأس كود الصفحة:

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

هذا السطر مضمن في إطار HTML5 الذي يتم إنشاؤه تلقائيًا.

عدم استخدام عرض مطلق

استخدم width: xx%; أو width: auto; بدلاً من width: xxx px;

استخدام حجم الخط بحجم نسبي

حدد حجم الخط بنسبة 100٪ من الحجم الافتراضي للصفحة، وهو 16 بكسل:

body { font: normal 100% Helvetica, Arial, sans-serif; }

ثم حدد حجم h1 بمقدار 1.5 مرة من الحجم الافتراضي، وهو 24 بكسل:

h1 { font-size: 1.5em; }

تخطيط سلس (fluid grid)

تكون مواقع العناصر متغيرة وليست ثابتة.

.main {
    float: right;
    width: 70%;
}

.leftBar {
    float: left;
    width: 25%;
}

فائدة التعويم (float) هي أنه إذا كانت العناصر لا تتناسب في العرض، فإن العناصر اللاحقة ستنزلق تلقائيًا تحت العناصر السابقة بدلاً من الفائض في الاتجاه الأفقي، مما يمنع ظهور شريط التمرير الأفقي.

تجنب استخدام التمركز المطلق (position: absolute) قدر الإمكان.

تحميل CSS المناسب

إذا كان عرض الشاشة أقل من 400 بكسل (max-device-width: 400px)، قم بتحميل ملف tinyScreen.css:

<link rel="stylesheet" type="text/css"
　　　　media="screen and (max-device-width: 400px)"
　　　　href="tinyScreen.css" />

إذا كان عرض الشاشة بين 400 بكسل و 600 بكسل، قم بتحميل ملف smallScreen.css:

<link rel="stylesheet" type="text/css"
　　　　media="screen and (min-width: 400px) and (max-device-width: 600px)"
　　　　href="smallScreen.css" />

تكيف الصور (fluid image)

img { max-width: 100%;}

المراجع والشكر

عنوان النص: https://wiki-power.com/
يتم حماية هذا المقال بموجب اتفاقية CC BY-NC-SA 4.0، يُرجى ذكر المصدر عند إعادة النشر.

تمت ترجمة هذه المشاركة باستخدام ChatGPT، يرجى تزويدنا بتعليقاتكم إذا كانت هناك أي حذف أو إهمال.