كيف تجعل موقعك متوافق مع جميع أحجام شاشات الأجهزة؟
عندما تقوم بتصميم موقع إلكتروني ، يجب أن يكون من أولويات عملك جعل هذا الموقع مرن يتناسب عرضة على جميع أحجام الشاشات ، وأنواع الأجهزة الألكترونية، بمختلف أحجامها ومقاسات شاشاتها، ومع تطور التكنلوجيا وإنتشار أجهزة الهواتف الذكية ، أصبح من يقوم بزيارة المواقع عبر هذه الأجهزة يفوق عدد الزائرين من أجهزة سطح المكتب ، لسرعة إنتشار هذه الأجهزة وتطورها ، من هنا تكمن ضرورة التركيز بشكل كبير على هذه الأجهزة عند برمجة مواقع الويب وتصميمها.
يمكن إتباع خطوات بسيطة لجعل الموقع مرن ، يتناسب مع مختلف أحجام ومقاسات شاشات الأجهزة المختلفة، عن طريق بعض خصائص لغة التنسيق css
اولاً: قبل ان نبداء يجب ان تكون على معرفة مسبقة بلغة HTML ، ولغة تنسيق المحتوى Css ، ولو حتى خبرة بسيطة.
لن نقوم بالشرح بالتفصيل ، بل سنركز على الاوامر المهمة فقط.
اولاً: قبل ان نبداء يجب ان تكون على معرفة مسبقة بلغة HTML ، ولغة تنسيق المحتوى Css ، ولو حتى خبرة بسيطة.
لن نقوم بالشرح بالتفصيل ، بل سنركز على الاوامر المهمة فقط.
الآن سنقوم بعمل صفحة HTML بسيطة ، سنشرح من خلالها درسنا ولتكن لدينا الصفحة التالية:
<!DOCTYPE><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>my site</title></head><body><div class="warp-all"><header class="site-header">راس الصفحة</header><main class='div-main'><div class="content">قسم المحتوى</div><aside class="slider-left">القائمة الجانبية</aside></main></div><footer class="site-footer"></footer></body></html>
هذا نموذج بسيط على صفحة ويب،
الآن سنقوم بعمل كود التنسيق بلغة css لوضع كل قسم من أقسام الصفحة في مكانه الصحيح ، كالتالي:
.warp-all {
width:85%;
background: #999;
height:auto;
margin: auto;
}
.site-header {
width:100%;
height:60px;
background:#03C;
margin-bottom:30px;
}
.div-main {
width:100%;
height:auto;
}
.content {
float:right;
width:60%;
background:#090;
height:300px;
margin:auto;
}
.slider-left {
float:left;
width:35%;
height: 300px;
background:#090;
margin:auto;
}
.site-footer {
clear:both;
width:100%;
position:absolute;
bottom:0;
height:100px;
background: #03C;
right: 0;
}
ليصبح لدينا الشكل الأولي التالي والذي سيكون عليه الموقع على أجهزة سطح المكتب ،
سنعود الى كود css ، لنشرح بعض الخصائص المهمة ، سنلاحظ أننا اسندنا الى الخاصية width قيمة مئوية ، وذلك لتفادي تشوه المحتوى عند تصغير حجم المتصفح ، أو عند العرض على الأجهزة الصغيرة ،يجب التركيز على هذه النقطة ، فلا تقم بإسناد قيمة ثابته للعرض ، بل يجب ان تكون قيمة نسبية،بحيث يأخذ كل قسم معين في الصورة نسبة معينة مهما كان حجم شاشة العرض .
الآن أصبح الشكل ملائم للعرض على الشاشات الكبيرة ، لاكن إذا كان المستخدم يقوم بالدخول للموقع من هاتف ذكي ، هنا سنجد أن شكل الموقع أصبح غير مناسب لعرض المحتوى.
سنأتي للخاصية الأهم في Css وهي محددة العرض @media ، نستطيع من خلال هذا المحدد ان نجعل موقعنا يظهر بأشكال مختلفة على حسب الجهاز أو حجم الشاشة التي يتم زيارة الموقع بواسطتها يمكن تحديد طريقة العرض بإستخدام الطريقة التالية :
@media screen and (min-width: 480px) {
p {
background-color: lightgreen;
}
}
p {
background-color: lightgreen;
}
}
في الكود السابق تم تحديد جهاز العرض ، عبارة عن شاشة عبر المحدد screen ( يمكن أن يكون tv للعرض على أجهزة التلفزيون ، print للطابعات ....)
ثم تم تحديد أقل عرض لحجم الشاشة هو 480px ، عبر الخاصية min-width ، كما يمكن أن يكون max-width لتحديد أعلى حجم للشاشة , لمعرفة جميع القيم الخاصة بهذا المحدد من هنا
الآن نقوم بتطبيق هذه الخصائص على مثالنا السابق ، الفكرة أننا سنجعل شكل الموقع يظهر بشكل عمودي على الاجهزة الصغيرة ، وكذلك عندما نقوم بتصغير حجم المتصفح ، من خلال إلغاء خاصية التعويم float ، لقسم المحتوى وقسم القائمة الجانبية ، بجعلها تأخذ القيمة none ، بالطريقة التالية:
@media (max-width: 900px) {
.content {
float:none;
width:100%;
}
.slider-left {
float:none;
width:100%;
}
}
@media (max-width: 400px) {
.content {
float:none;
width:100%;
}
.slider-left {
float:none;
width:100%;
}
.warp-all {
width:98%;
}
}
.content {
float:none;
width:100%;
}
.slider-left {
float:none;
width:100%;
}
}
@media (max-width: 400px) {
.content {
float:none;
width:100%;
}
.slider-left {
float:none;
width:100%;
}
.warp-all {
width:98%;
}
}
اولاً يجب إضافة كود الميتا التالي في قسم الهيد للصفحة بعد الوسمم <head> مباشرة
<meta content='width=device-width, initial-scale=1' name='viewport'/>
أصبح شكل الموقع كما في الصورة التالية:
لتجربة النتيجة التي حصلت عليها ، قم بتصغير حجم المتصفح ، لتشاهد النتيجة التي حصلت عليها ،.
نعم طريقة سهلة وليست صعبة أليس كذلك؟
بعد الإنتهاء من تصميم موقعك يمكنك الأستعانة ببعض الأدوات التي تختبر توافق موقعك مع الأجهزة الذكية من خلالها ، ومن ضمن هذه الأدوات أداة خاصة بمحرك البحث بينج راجع المقالة من هنا
او الأداة الخاصة بجوجل من هنا
الله يعطيكم العافية
ردحذفبسراحة دخت وانا ادور هذا الكود
chokran
ردحذفأزال أحد مشرفي المدونة هذا التعليق.
ردحذفمشكورين
ردحذفكذب انا جربت
ردحذف