12

ما هية تصاميم المواقع المتجاوبة responsive

كما هوة العنوان لقد رئيت الكثير من المبرمجين او مطوري القوالب يذكرون كلمة responsive

ان القالب responsive ان الموقع responsive الخ...

ما المقصود بالـ responsive لقد بحثت عنها ولاكن لم اجد مقالة عربية او شرح عربي

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

14
mouhsine.bakhich أضف ردا

كون الموقع Responsive ، يعني انه طريقة عرض العناصر تتكيف مع حجم الشاشة التي تعرض عليها ، مثلا نقوم بعرض قائمة عريضة للموقع و 4 بلوكات واحدة جنب الاخرى عندما يكون حجم الشاشة كبيرا ( 1024px كمثال ) ، أما عند الدخول للموقع من هاتف محمول نقوم بتحويل القائمة الى قائمة منسدلة تظهر بعض الضغط على زر يشير الى قائمة ، كما نقوم بتصغير حجم البلوكات و عرضها الواحدة اسفل الاخرى أو بلوكان في كل سطر .

هذا أقصى ما استطعت ان ابسطه أتمنى أن تكون الفكرة وصلت.

0
Hussam Abd أضف ردا

شكرا لك اخي الكريم

لقد فهمت معنها الان ولاكن لم استطيع ان اعمل القامة المنسدلة

هل طريقة عملها مثل القائمة العادية 

<div id="top-nav">
    <ul>
    <li><a href="#">عن الموقع</a></li>
    <li><a href="#">اتصل بنا</a></li>
    <li><a href="#">المدونة</a></li>
    <li><a href="#">اضف كتابا</a></li>
    <li><a href="#">انضم لنا</a></li>
    </ul>
2
mouhsine.bakhich أضف ردا

لعرض قائمة منسدلة عليك القيام بالتالي

CSS

 ul,li {
    list-style-type: none;
}
#top-nav ul li{
width: 100px;
position:relative;
}
#top-nav>ul>li a{
    width: 100%;
    display:block;
     color: #fff;
     padding:5px;
      background-color: #000;
    text-decoration: none;
}

#top-nav>ul>li>ul{
position:absolute;
right:0px;
display:none;
}

HTML

قائمة عن الموقع اتصل بنا المدونة اضف كتابا انضم لنا

JQuery

$(document).ready(function($) {

$('#drop-down').on('click',function(event){
    event.preventDefault();
$this = $(this);
$this.siblings('ul').slideToggle();
})
});

لم ارد تخصيص CSS أكثر من ذلك ولكن المثال كافي لكفي تفهم كيفية القيام بالعملية.

2
mouhsine.bakhich أضف ردا

الموقع لا يسمح باضافة أكواد HTML في التعليق ، لذا قمت بعمل JsFiddle

1
Hussam Abd أضف ردا

شكرا لك كثيرا ^_^ :)

2
pluscss أضف ردا

responsive تعني متجاوب مع التغيرات في قياسات الشاشات و يمكن تصفح الموقع باستخدام ( متصفح سطح مكتب أو متصفح جوال أو أجهزة كفية ) بسهولة دون أن يكون هناك أي خلل في التصميم .

أتمنى أن أكون و الأخوة قد أفدناك .

1
Hussam Abd أضف ردا

شكرا لك ^_^

1
a4kreny أضف ردا

تفضّل إقرأ من هُنا

  • لا يتطّلب لغة إنجليزية متقدمة
0
Hussam Abd أضف ردا

شكرا اخي الكريم :)