أحدثت الهواتف الذكية و الأجهزة اللوحية ثورة كبيرة و إختلفت أحجام الشاشات من كبيرة إلى صغيرة و هنا يقع على عاتق مصمم المواقع توفير تصميم مناسب لكل الجمهور بإختلاف الأجهزة التي يتصفحون بها الموقع.
ما هو التصميم المتجاوب Responsive Design؟
كان Ethan Marcotte أول من إقترح الحل حين إكتشف طرق لتصميم موقع متجاوب يتغير بتغير حجم الشاشة. التصميم المتجاوب هو الإستخدام الذكي للـ CSS لضمان ظهور الصفحات بشكل جيد على مختلف أحجام الشاشات، دون الإستعانة بإعادة توجيه الـ URL و إستخدام أكواد HTML و CSS مختلفة و هي ليست تكنولوجيا متطورة بل هي مبدئ من مبادئ التصميم التي تساعد على تحقيق نتيجة.
كيف نستعمل التصميم المتجاوب Responsive Design؟
على سبيل المثال أنا أريد أن أكتب نصا بحجم 1em و أريده أن يتقلص بتقلص الشاشة تابعوا معنا الطريقة:
p {
font-size:1em;
}
@media all and (max-width:400px) {
p {
font-size:0.8em;
}
}
بهذا الكود أمرت المتصفح بأن يظهر حجم النص بحجم 1em لكن يتقلص حجم النص إلى 0.8em إذا كان حجم الشاشة أقل من 400px .
حسب خبرتي في هذا المجال فإن أفضل طريقة لتصميم موقع متجاوب هو إنشاء ورقة الستايل CSS مع عناصر الهيكلة الرئيسية و يقوم المتصفح برفع ورقة الستايل CSS الخاصة بالهاتف مثلا و إليكم الطريقة و الشرح:
<link rel="stylesheet" type="text/css" media="handheld and (orientation:landscape) and (max-device-width: 720px)" href="tablet_layout.css" />بهذا الكود أمرت المتصفح بأن إذا كان حجم شاشة الجهاز أقل من 720px فقم برفع ورقة الستايلCSS الخاصة بهذه الأجهزة
إذن كانت هذه نبذة عن التصميم المتجاوب Responsive Design و نعدكم بمواضيع نظرية و تطبيقية بخصوص هذا الموضوع و إلى اللقاء
ليست هناك تعليقات:
إترك تعليقك