سلام عليكم و رحمة الله و بركاته
هل تصميم موقعك متجاوب يمكن نعم او لا و هو مهم لي أن اصبح اغلب زوار المواقع يستخدمونا الهواتف الذاكية و ان كان لا فاليوم في اول تدوينة على مدونة تقنيون راح نقدم اليكم :
1:ماهو التصميم المتجاوب
2:و كيف جعل لتصميم الموقع متجاوب1:ماهو التصميم المتجاوب
3:و كيفية معرفة تصميم الموقع متجاوب
نبدأ أولا
1: تعريف التصميم المتجاوب
من المهام التي تقع على مصمم الويب المحترف أن ينتج صفحة ويب تصل لكل الزائرين بمستوى عالي بغض النظر عن الأجهزة التي يستخدم كل منهم لذلك ظهرما يسمى بتصميم الويب المتجاوب وهو أسلوب لتصميم مواقع الويب يسمح لك بإنشاء موقع ويب يتكيف مع الجهاز الذي يتم عرضه عليه،فإذا كان جهاز كمبيوتر محمول أو هاتفًا ذكيًا أو جهازًا لوحيًا فإن الموقع يقوم تلقائيا بتعديل حجم الواجهة والصفحات حسب المقاسات الجديدة للعرض، ويتم تكويد هذا التصميم بإستخدام HTML5 و CSS3 .
اذا فنستخلص من ذلك ان التصميم المتجاوب هي تكويد الموقع بحيث يتجاوب مع جميع الاجهزة المختلفة الاحجام .
كما قلنا يتم تكويد هذا التصميم بإستخدام HTML5 و CSS3 و أكثر CSS3
و خاصية @media query
أول ابحث عن
<head/>
و نضيف فوقه
<meta content='width=device-width, initial-scale=1.0, maximum-scale=12.0, minimum-scale=.25, user-scalable=yes' name='viewport'/ثم نبحث عن
]]></b:skin>
ونضع فوقه هذا الكود
/* CSS Global Responsive */@media screen and (max-width:960px) {}@media only screen and (max-width:768px){}@media (min-width:768px) and (max-width:979px) {}@media (max-width:767px) {}@media only screen and (min-width:640px){}@media only screen and (max-width:640px){}@media only screen and (min-width:640px){}@media only screen and (max-width:480px){}@media screen and (max-width:320px){}
و نقوم بإضافه الاكواد بداخله مثلا القالب الاساسي والعادي يتكون من
قائمه علويه
ثم الهيدر
ثم القائمه الثانيه
تم مكان المشاركات
ثم القائمه الجانبيه
ثم الفوتر
3: كيفية معرفة تصميم الموقع متجاوب
للمعرفة تصميم الموقع متجاوب نستعمل موقعين
1 من هنا
2 من هنا
نلتقي بكم في درس جديد ان اشاء الله و نرجو ان استفدتم من هذه التدوينة الى القاء
