جار التحديث ...
جار التحديث ...

ما هو التصميم المتجاوب ؟

  • 0

كيف يمكن تصميم موقع متجاوب لجميع الشاشات بدون وجود سكرول للصفحة

إجابات المستخدمين (10)


هو عبارة عن تصميم تستطيع تشغيله على جميع انواع الشاشات (كبيرة . متوسطة . صغيرة) مع محافظته على نفس الجمالية يمكن ان تقوم بذلك عن طريق

CSS فقط عبر الجمل max-width ------min-width وهذه الطريقة لانصحك فيها لانه طويلة وشاقة جداً

الطريقة الثانية تعلم مكتبة bootstrap والتي هي عبارة عن خليط جاهز من html - css -javascript وحتختصر عليك وقت وتعب بشكل كبير وهي عبارة عن كلاسات جاهزة يعني انت فقط تنسخ وتلصق وتتعلم بعض التعديلات البسيطة يعني تعلمها حيستغرقك من 3-7 ايام


  • 0
رد على التعليق (0)

الردود :


لا يوجد ردود بعد


سجل الدخول لاضافة رد

ممكن تبعث صورة للتصميم اللي عملته لكي استطيع فهم سؤالك و مساعدتك


  • 1
رد على التعليق (0)

الردود :


لا يوجد ردود بعد


سجل الدخول لاضافة رد
  • شريك الإطلاق
  • عضو جديد
  • قبل أشهر 9

مشكور اخووي عماد..انا لسه مبتدأ..اريد اتعلم responsive بدون فريم ورك ..لكي احترف واتعلم ومن ثم اتعلم البوتستراب كزيادة خبرة لا اكثر...المشكلة انحلت عندي


  • 0
رد على التعليق (0)

الردود :


لا يوجد ردود بعد


سجل الدخول لاضافة رد
  • شريك الإطلاق
  • عضو جديد
  • قبل أشهر 9

://aseel12345.000webhostapp.com


  • 2
رد على التعليق (2)

الردود :


<p>تابع هذا الكورس لعمل موقع متجاوب بواسطة media query</p> <p><a title="https://www.youtube.com/watch?v=IjY-BZQHqLA&amp;list=PLDoPjvoNmBAzVaRnCYoklHqz01jve8ZWv" href="اضغط هنا" target="_blank" rel="noopener">اضغط هنا</a></p>

<p><a href="https://www.youtube.com/watch?v=IjY-BZQHqLA&amp;list=PLDoPjvoNmBAzVaRnCYoklHqz01jve8ZWv" target="_blank" rel="noopener">https://www.youtube.com/watch?v=IjY-BZQHqLA&amp;list=PLDoPjvoNmBAzVaRnCYoklHqz01jve8ZWv</a></p>


سجل الدخول لاضافة رد
  • عضو أكاديمي
  • قديم العهد
  • قبل أشهر 9

ماهو البوتسراب ؟

البوتسراب هو اطار عمل بلغات HTML , CSS , JS
واطار العمل هو مجموعة من الاكود الجاهزة التى توفر الجهد والعناء للقيام بالكثير من الاشياء

وهى Boostrap Grid System 

نظام يقوم ببناء الموقع على هيئة صفوف واعمدة وهذا لجعل الموقع متجاوب ويمكنه العمل على جميع مقاسات الشاشات.
البتوستراب هو نظام متجاوب بمعنى ان الاعمدة ستقوم باعادة ترتيب نفسها بناء على مقاس الشاشة
ويوجد اربعة كلاسات للبوتستراب
 
  • xm للموبيل
  • sm للتابلت
  • md للجهاز العادى
  • lg للاجهزة الكبيرة

2 -- مع وجود طريقة اخرى بواسطة "css "media queries تفضل بزيارة الرابط

 

هذا ما استطعت فهمه من السؤال فأنا لم أفهم السؤال جيدا :)


  • 1
رد على التعليق (3)

الردود :


<p>شكرا لك..لكن انا اقصد..اننا سويت موقع واريد اخليه متجاوب لجميع الشاشات..وسويته بدون فريم ورك عبر ميديا كوري..لكن وجدت خلل في التجاوب..بسبب ظهور سكرول للموقع وفراغ على يمين الصفحة..ايش السبب</p>

<p>لديك خطأ بضبط المقاييس تأكد من المقاييس الخاصة بكل تقسيم هذه الكلاسات لا تأخد مقاييس مضبوطة تأكد منها&nbsp;</p> <p>1 --&nbsp;كلاسات parts الموجودة ب كلاس works&nbsp; هذه هي التغييرات خاصتي :</p> <div class="styles-section-title styles-selector" style="min-width: 0px; min-height: 0px; box-sizing: border-box; overflow-wrap: break-word; cursor: text; color: #222222; font-family: Consolas, 'Lucida Console', 'Courier New', monospace; font-size: 12px;"> <div style="min-width: 0px; min-height: 0px; box-sizing: border-box;"><span class="selector" style="min-width: 0px; min-height: 0px; box-sizing: border-box; color: #888888;"><span class="simple-selector selector-matches" style="min-width: 0px; min-height: 0px; box-sizing: border-box; color: #222222;">.works</span></span><span style="min-width: 0px; min-height: 0px; box-sizing: border-box;">&nbsp;{</span></div> </div> <div class="style-properties matched-styles monospace" style="flex: 1 1 0%; padding: 2px 4px 0px 0px; min-width: 0px; min-height: 0px; box-sizing: border-box; font-family: Consolas, 'Lucida Console', 'Courier New', monospace; font-size: 12px; margin: 0px; list-style: none; clear: both; display: flex; color: #222222; white-space: nowrap;"> <div class="tree-outline-disclosure" style="min-width: 100%; min-height: 0px; box-sizing: border-box; display: inline-block;"> <ol class="tree-outline" style="min-width: 0px; min-height: 0px; box-sizing: border-box; padding: 0px; margin: 0px; z-index: 0; position: relative; list-style-type: none;" role="tree"> <li style="min-width: 0px; min-height: 14px; box-sizing: border-box; text-overflow: ellipsis; white-space: normal; position: relative; display: block; align-items: center; margin-left: 0px !important; padding-left: 38px; cursor: auto; clear: both;" role="treeitem"><input class="enabled-button" style="min-width: 0px; min-height: 0px; font-family: inherit; font-size: 10px; background-color: white; visibility: visible; float: left; margin: 0px; vertical-align: top; position: relative; z-index: 1; width: 18px; left: -40px; top: 1px; height: 13px;" type="checkbox" /> <span class="webkit-css-property" style="min-width: 0px; min-height: 0px; box-sizing: border-box; color: #c80000; margin-left: -38px;">width</span>:&nbsp;<span class="value" style="min-width: 0px; min-height: 0px; box-sizing: border-box;">100%</span>;</li> <li style="min-width: 0px; min-height: 14px; box-sizing: border-box; text-overflow: ellipsis; white-space: normal; position: relative; display: block; align-items: center; margin-left: 0px !important; padding-left: 38px; cursor: auto; clear: both;" role="treeitem"><input class="enabled-button" style="min-width: 0px; min-height: 0px; font-family: inherit; font-size: 10px; background-color: white; visibility: visible; float: left; margin: 0px; vertical-align: top; position: relative; z-index: 1; width: 18px; left: -40px; top: 1px; height: 13px;" type="checkbox" /> <span class="webkit-css-property" style="min-width: 0px; min-height: 0px; box-sizing: border-box; color: #c80000; margin-left: -38px;">padding-top</span>:&nbsp;<span class="value" style="min-width: 0px; min-height: 0px; box-sizing: border-box;">10%</span>;</li> <li style="min-width: 0px; min-height: 14px; box-sizing: border-box; text-overflow: ellipsis; white-space: normal; position: relative; display: block; align-items: center; margin-left: 0px !important; padding-left: 38px; cursor: auto; clear: both;" role="treeitem"><input class="enabled-button" style="min-width: 0px; min-height: 0px; font-family: inherit; font-size: 10px; background-color: white; visibility: visible; float: left; margin: 0px; vertical-align: top; position: relative; z-index: 1; width: 18px; left: -40px; top: 1px; height: 13px;" type="checkbox" /> <span class="webkit-css-property" style="min-width: 0px; min-height: 0px; box-sizing: border-box; color: #c80000; margin-left: -38px;">padding-bottom</span>:&nbsp;<span class="value" style="min-width: 0px; min-height: 0px; box-sizing: border-box;">10%</span>;</li> </ol> </div> </div> <div class="sidebar-pane-closing-brace" style="min-width: 0px; min-height: 0px; box-sizing: border-box; clear: both; color: #222222; font-family: Consolas, 'Lucida Console', 'Courier New', monospace; font-size: 12px; white-space: nowrap;">}</div> <div class="styles-section-title styles-selector" style="min-width: 0px; min-height: 0px; box-sizing: border-box; overflow-wrap: break-word; cursor: text; color: #222222; font-family: Consolas, 'Lucida Console', 'Courier New', monospace; font-size: 12px;"> <div style="min-width: 0px; min-height: 0px; box-sizing: border-box;"><span class="selector" style="min-width: 0px; min-height: 0px; box-sizing: border-box; color: #888888;"><span class="simple-selector selector-matches" style="min-width: 0px; min-height: 0px; box-sizing: border-box; color: #222222;">.container</span></span><span style="min-width: 0px; min-height: 0px; box-sizing: border-box;">&nbsp;{</span></div> </div> <div class="style-properties matched-styles monospace" style="flex: 1 1 0%; padding: 2px 4px 0px 0px; min-width: 0px; min-height: 0px; box-sizing: border-box; font-family: Consolas, 'Lucida Console', 'Courier New', monospace; font-size: 12px; margin: 0px; list-style: none; clear: both; display: flex; color: #222222; white-space: nowrap;"> <div class="tree-outline-disclosure" style="min-width: 100%; min-height: 0px; box-sizing: border-box; display: inline-block;"> <ol class="tree-outline" style="min-width: 0px; min-height: 0px; box-sizing: border-box; padding: 0px; margin: 0px; z-index: 0; position: relative; list-style-type: none;" role="tree"> <li style="min-width: 0px; min-height: 14px; box-sizing: border-box; text-overflow: ellipsis; white-space: normal; position: relative; display: block; align-items: center; margin-left: 0px !important; padding-left: 38px; cursor: auto; clear: both;" role="treeitem"><input class="enabled-button" style="min-width: 0px; min-height: 0px; font-family: inherit; font-size: 10px; background-color: white; visibility: visible; float: left; margin: 0px; vertical-align: top; position: relative; z-index: 1; width: 18px; left: -40px; top: 1px; height: 13px;" type="checkbox" /> <span class="webkit-css-property" style="min-width: 0px; min-height: 0px; box-sizing: border-box; color: #c80000; margin-left: -38px;">width</span>:&nbsp;<span class="value" style="min-width: 0px; min-height: 0px; box-sizing: border-box;">100%</span>;</li> <li class="parent" style="min-width: 0px; min-height: 14px; box-sizing: border-box; text-overflow: ellipsis; white-space: normal; position: relative; display: block; align-items: center; margin-left: 0px !important; padding-left: 38px; cursor: auto; clear: both;" role="treeitem" aria-expanded="false"><input class="enabled-button" style="min-width: 0px; min-height: 0px; font-family: inherit; font-size: 10px; background-color: white; visibility: visible; float: left; margin: 0px; vertical-align: top; position: relative; z-index: 1; width: 18px; left: -40px; top: 1px; height: 13px;" type="checkbox" /> <span class="webkit-css-property" style="min-width: 0px; min-height: 0px; box-sizing: border-box; color: #c80000; margin-left: -38px;">margin</span>:&nbsp;<span class="value" style="min-width: 0px; min-height: 0px; box-sizing: border-box;">auto</span>;</li> </ol> </div> </div> <div class="sidebar-pane-closing-brace" style="min-width: 0px; min-height: 0px; box-sizing: border-box; clear: both; color: #222222; font-family: Consolas, 'Lucida Console', 'Courier New', monospace; font-size: 12px; white-space: nowrap;">}</div> <p>2--&nbsp;كلاس profile فهو كبير لذلك جرب وضع :</p> <div class="styles-section-title styles-selector" style="min-width: 0px; min-height: 0px; box-sizing: border-box; overflow-wrap: break-word; cursor: text; color: #222222; font-family: Consolas, 'Lucida Console', 'Courier New', monospace; font-size: 12px; background-color: #eaf1fb;"> <div class="media-list media-matches" style="min-width: 0px; min-height: 0px; box-sizing: border-box; color: #888888;"> <div class="media editable-media" style="min-width: 0px; min-height: 0px; box-sizing: border-box; overflow: hidden; color: #222222;"><span style="min-width: 0px; min-height: 0px; box-sizing: border-box;"><span style="min-width: 0px; min-height: 0px; box-sizing: border-box;">@media&nbsp;</span><span class="media-text" style="min-width: 0px; min-height: 0px; box-sizing: border-box;">(max-width: 991px)</span></span></div> </div> <div class="styles-section-subtitle" style="min-width: 0px; min-height: 0px; box-sizing: border-box; color: #555555; float: right; margin-left: 5px; max-width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; height: 15px; margin-bottom: -1px;"><span class="devtools-link" style="min-width: 0px; min-height: 0px; box-sizing: border-box; color: inherit; text-decoration-line: underline; cursor: pointer; user-select: none;">style.css:545</span></div> <div style="min-width: 0px; min-height: 0px; box-sizing: border-box;"><span class="selector" style="min-width: 0px; min-height: 0px; box-sizing: border-box; color: #888888;"><span class="simple-selector selector-matches" style="min-width: 0px; min-height: 0px; box-sizing: border-box; color: #222222;">.profile</span></span><span style="min-width: 0px; min-height: 0px; box-sizing: border-box;">&nbsp;{</span></div> </div> <div class="style-properties matched-styles monospace" style="flex: 1 1 0%; padding: 2px 4px 0px 0px; min-width: 0px; min-height: 0px; box-sizing: border-box; font-family: Consolas, 'Lucida Console', 'Courier New', monospace; font-size: 12px; margin: 0px; list-style: none; clear: both; display: flex; color: #222222; white-space: nowrap; background-color: #eaf1fb;"> <div class="tree-outline-disclosure" style="min-width: 100%; min-height: 0px; box-sizing: border-box; display: inline-block;"> <ol class="tree-outline" style="min-width: 0px; min-height: 0px; box-sizing: border-box; padding: 0px; margin: 0px; z-index: 0; position: relative; list-style-type: none;" role="tree"> <li style="min-width: 0px; min-height: 14px; box-sizing: border-box; text-overflow: ellipsis; white-space: normal; position: relative; display: block; align-items: center; margin-left: 0px !important; padding-left: 38px; cursor: auto; clear: both;" role="treeitem"><input class="enabled-button" style="min-width: 0px; min-height: 0px; font-family: inherit; font-size: 10px; background-color: white; visibility: visible; float: left; margin: 0px; vertical-align: top; position: relative; z-index: 1; width: 18px; left: -40px; top: 1px; height: 13px;" type="checkbox" /> <span class="webkit-css-property" style="min-width: 0px; min-height: 0px; box-sizing: border-box; color: #c80000; margin-left: -38px;">width</span>:&nbsp;<span class="value" style="min-width: 0px; min-height: 0px; box-sizing: border-box;">95%</span>;</li> <li style="min-width: 0px; min-height: 14px; box-sizing: border-box; text-overflow: ellipsis; white-space: normal; position: relative; display: block; align-items: center; margin-left: 0px !important; padding-left: 38px; cursor: auto; clear: both;" role="treeitem"><input class="enabled-button" style="min-width: 0px; min-height: 0px; font-family: inherit; font-size: 10px; background-color: white; visibility: visible; float: left; margin: 0px; vertical-align: top; position: relative; z-index: 1; width: 18px; left: -40px; top: 1px; height: 13px;" type="checkbox" /> <span class="webkit-css-property" style="min-width: 0px; min-height: 0px; box-sizing: border-box; color: #c80000; margin-left: -38px;">margin-left</span>:&nbsp;<span class="value" style="min-width: 0px; min-height: 0px; box-sizing: border-box;">5%</span>;</li> </ol> </div> </div> <p>&nbsp;</p> <p>3 -- class&nbsp;<span style="color: #222222; font-family: Consolas, 'Lucida Console', 'Courier New', monospace; font-size: 12px; white-space: pre-wrap;">creative </span>&nbsp;هذه هي التغييرات خاصتي :</p> <div class="styles-section-title styles-selector" style="min-width: 0px; min-height: 0px; box-sizing: border-box; overflow-wrap: break-word; cursor: text; color: #222222; font-family: Consolas, 'Lucida Console', 'Courier New', monospace; font-size: 12px;"> <div class="media-list media-matches" style="min-width: 0px; min-height: 0px; box-sizing: border-box; color: #888888;"> <div class="media editable-media" style="min-width: 0px; min-height: 0px; box-sizing: border-box; overflow: hidden; color: #222222;"><span style="min-width: 0px; min-height: 0px; box-sizing: border-box;"><span style="min-width: 0px; min-height: 0px; box-sizing: border-box;">@media&nbsp;</span><span class="media-text" style="min-width: 0px; min-height: 0px; box-sizing: border-box;">(max-width: 991px)</span></span></div> </div> <div class="styles-section-subtitle" style="min-width: 0px; min-height: 0px; box-sizing: border-box; color: #555555; float: right; margin-left: 5px; max-width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; height: 15px; margin-bottom: -1px;"><span class="devtools-link" style="min-width: 0px; min-height: 0px; box-sizing: border-box; color: inherit; text-decoration-line: underline; cursor: pointer; user-select: none;">style.css:610</span></div> <div style="min-width: 0px; min-height: 0px; box-sizing: border-box;"><span class="selector" style="min-width: 0px; min-height: 0px; box-sizing: border-box; color: #888888;"><span class="simple-selector selector-matches" style="min-width: 0px; min-height: 0px; box-sizing: border-box; color: #222222;">.creative</span></span><span style="min-width: 0px; min-height: 0px; box-sizing: border-box;">&nbsp;{</span></div> </div> <div class="style-properties matched-styles monospace" style="flex: 1 1 0%; padding: 2px 4px 0px 0px; min-width: 0px; min-height: 0px; box-sizing: border-box; font-family: Consolas, 'Lucida Console', 'Courier New', monospace; font-size: 12px; margin: 0px; list-style: none; clear: both; display: flex; color: #222222; white-space: nowrap;"> <div class="tree-outline-disclosure" style="min-width: 100%; min-height: 0px; box-sizing: border-box; display: inline-block;"> <ol class="tree-outline" style="min-width: 0px; min-height: 0px; box-sizing: border-box; padding: 0px; margin: 0px; z-index: 0; position: relative; list-style-type: none;" role="tree"> <li style="min-width: 0px; min-height: 14px; box-sizing: border-box; text-overflow: ellipsis; white-space: normal; position: relative; display: block; align-items: center; margin-left: 0px !important; padding-left: 38px; cursor: auto; clear: both;" role="treeitem"><input class="enabled-button" style="min-width: 0px; min-height: 0px; font-family: inherit; font-size: 10px; background-color: white; visibility: visible; float: left; margin: 0px; vertical-align: top; position: relative; z-index: 1; width: 18px; left: -40px; top: 1px; height: 13px;" type="checkbox" /> <span class="webkit-css-property" style="min-width: 0px; min-height: 0px; box-sizing: border-box; color: #c80000; margin-left: -38px;">width</span>:&nbsp;<span class="value" style="min-width: 0px; min-height: 0px; box-sizing: border-box;">100%</span>;</li> </ol> </div> </div> <p>&nbsp;</p> <p>3-- هذه هي التغييرات خاصتي :</p> <p>@media (max-width: 991px)</p> <p>.social {</p> <p>&nbsp; &nbsp; width: 100%;</p> <p>}</p> <p>&nbsp;</p> <p>بإمكانك اضاف مارجين \ هامش بنقص نسبة من width وزيادتها في margin راسلني على الفيسبوك&nbsp;ستجده بصفحتي الشخصية لارسل لك صور شكل الموقع بعد هذه التغييرات</p>

<h3><strong>انصحك باستعمال خاصية المطورين الموجودة بالمتصفح وبعدها قم بضبط المقاسات على حسب رغبتك&nbsp;</strong></h3>


سجل الدخول لاضافة رد
سجل الدخول لاضافة اجابة جديدة