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

Hussam Abd

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

التعليقات

mouhsine.bakhich - محسن بخيش

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

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>

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 أكثر من ذلك ولكن المثال كافي لكفي تفهم كيفية القيام بالعملية.

mouhsine.bakhich - محسن بخيش

الموقع لا يسمح باضافة أكواد HTML في التعليق ، لذا قمت بعمل JsFiddle
http://jsfiddle.net/jgtGL/

Hussam Abd

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

pluscss - roudy hermez

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

Hussam Abd

شكرا لك ^_^

a4kreny - Abdullah S Banqi

تفضّل إقرأ من هُنا
http://en.wikipedia.org/wiki/Responsive_web_design

لا يتطّلب لغة إنجليزية متقدمة

Hussam Abd

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

	الموضوع و التعليقات و باقي البيانات في هذه الصفحة منقولة و معدلة من المصدر على الرابط التالي : https://io.hsoub.com/webdev/6127
	هذا الموضوع مرخص تحت : رخصة المشاع الإبداعي BY-SA

المشاركة :