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

N write.svg
هذه مقالة غير مراجعة. ينبغي أن يزال هذا القالب بعد أن يراجعها محرر ما عدا الذي أنشأها؛ إذا لزم الأمر فيجب أن توسم المقالة بقوالب الصيانة المناسبة. (سبتمبر 2017)

التصميم المتجاوب (بالإنجليزية: Responsive Design) هو أسلوب لتصميم مواقع الويب يسمح بإنشاء موقع ويب يتكيف مع الجهاز الذي يتم عرضه عليه، فإذا كان جهاز كمبيوتر محمول أو هاتفًا ذكيًا أو جهازًا لوحيًا فإن الموقع يقوم تلقائيا بتعديل حجم الواجهة والصفحات حسب المقاسات الجديدة للعرض، ويتم تكويد هذا التصميم بإستخدام HTML5 وسي إس إس 3.

محتويات

طريقة عمل التصميمات المتجاوبةعدل

تجاوب المقالاتعدل

تتم العملية عند قراءة المتصفح للجهاز الذي قام بفتح الموقع،فأول شيء سيقوم بالتعرف عليه هو عرض الصفحة، ،ولذلك فهناك ثلاثة أجهزة أساسية يراعي دائما المطورين العمل عليها في التصميم المتجاوب وهما شاشات الهواتف، أجهزة الكمبيوتر المكتبية والأجهزة الوحية، ومن أجل استيعاب هذه الشاشات المختلفة سيكون هناك أربعة أحجام لعرض الشاشة وهما 320 بيكسل و600 بيكسل و768 بيكسل ثم 1280 بيكسل وهناك عرض 1824 ولكنه لا يُستخدم بكثرة كونه يُستخدم في الشاشات التي يتجاوز حجمها مستوى أجهزة الكمبيوتر المكتبية.

تجاوب الصورعدل

عند وضع صورة متجاوبة فإنه ُكتب كود الصورة كما يلي:

(body
background-image: url(../images/bg.jpg);
background-repeat: no-repeat;
background-color: #000;
background-size:contain;

وذلك يعني أنه عندما تظهر الصورة مثلا في حجم أجهزة الكمبيوتر المكتبية فإن الصورة ستتكيف مع حجم المتصفح تلقائيا.

انظر ايضاعدل

مراجععدل

كيف يعمل الويب

تعلم برمجة المواقع في اقرب وقت ممكن على فيسبوك

 
هذه بذرة مقالة عن موضوع تقني بحاجة للتوسيع. شارك في تحريرها.