تصميم مواقع الويب المتجاوبة Responsive Web Design

الدرس السابق الدرس التالي
تصميم مواقع ويب متجاوبة بتنسيق HTML
يتعلق تصميم الويب سريع الاستجابة بإنشاء صفحات ويب متجاوبة على جميع الأجهزة!
سيتم ضبط تصميم الويب سريع الاستجابة تلقائيًا حسب أحجام الشاشات وإطارات العرض المختلفة
ما هو تصميم الويب سريع الاستجابة Responsive Web Design؟
يتعلق تصميم الويب سريع الاستجابة باستخدام HTML و CSS لتغيير حجم موقع الويب أو إخفائه أو تقليصه أو تكبيره تلقائيًا لجعله يبدو متناسب  على جميع الأجهزة (أجهزة الكمبيوتر المكتبية والأجهزة اللوحية والهواتف):
مثال
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}
.menu {
  float: left;
  width: 20%;
}
.menuitem {
  padding: 8px;
  margin-top: 7px;
  border-bottom: 1px solid #f1f1f1;
}
.main {
  float: left;
  width: 60%;
  padding: 0 20px;
  overflow: hidden;
}
.right {
  background-color: lightblue;
  float: left;
  width: 20%;
  padding: 10px 15px;
  margin-top: 7px;
}

@media only screen and (max-width:800px) {
  /* For tablets: */
  .main {
    width: 80%;
    padding: 0;
  }
  .right {
    width: 100%;
  }
}
@media only screen and (max-width:500px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width: 100%;
  }
  .menu {
    display:flex; 
  }
}
</style>
</head>
<body dir='rtl' style="font-family:Verdana;">

<div style="background-color:#f1f1f1;padding:15px;">
<h3> قم بتغيير حجم نافذة المتصفح  لمشاهد تغيرات حجم الشاشة </h3>
</div>

<div style="overflow:auto">
  <div class="menu">
 <div class = "menuitem"> المشي </div>
     <div class = "menuitem"> النقل </div>
     <div class = "menuitem"> التاريخ </div>
     <div class = "menuitem"> المعرض </div>
  </div>

<div class="main">
<h2> المشي </h2>
<p> سيستغرق المشي من مونتيروسو إلى ريوماجيوري ما يقرب من ساعتين ، تستغرق أو تستغرق ساعة اعتمادًا على ظروف الطقس وشكلك الجسدي. </p>
<img src="https://www.w3schools.com/html/img_5terre.jpg" style="width:100%">
</div>

  <div class="right">
  <h2> ماذا؟ </h2>
     <p> تضم Cinque Terre خمس قرى: مونتيروسو , وفيرنازا ,وكورنيجليا , ومانارولا , وريوماجيوري. </ p>
     <h2> أين؟ </h2>
     <p> على الساحل الشمالي الغربي للريفيرا الإيطالية ، شمال مدينة لا سبيتسيا. </ p>
     <h2> السعر؟ </h2>
     <p>  مجاني! </p>
  </div>
</div>


<div style="background-color:#799;text-align:center;padding:10px;margin-top:7px; color:#fff; ">تعد صفحة الويب هذه جزءًا من عرض توضيحي لتصميم الويب المرن . قم بتغيير حجم نافذة المتصفح لرؤية استجابة المحتوى لتغيير الحجم.</div>

</body>
</html>
إعداد منفذ العرض Setting The Viewport
لإنشاء موقع ويب سريع الاستجابة لمختلف الاجهزة ، أضف علامة <meta> التالية إلى جميع صفحات الويب الخاصة بك:
مثال
<meta name="viewport" content="width=device-width, initial-scale=1.0">
سيؤدي هذا إلى تعيين إطار عرض لصفحتك ، ويعطي تعليمات للمتصفح حول كيفية التحكم في أبعاد الصفحة وقياسها.
صور مستجيبة Responsive Images
الصور المستجيبة هي صور يتم قياسها بشكل جيد لتتناسب مع جميع احجام المتصفحات.
باستخدام خاصية (width) Using the width Property  
إذا تم تعيين خاصية عرض (width) CSS إلى 100٪ ، فستكون الصورة سريعة الاستجابة وتتسع لأعلى ولأسفل:
<img src="img_girl.jpg" style="width:100%;">
لاحظ أنه في المثال أعلاه ، يمكن تكبير الصورة لتكون أكبر من حجمها الأصلي. سيكون الحل الأفضل ، في كثير من الحالات ، هو استخدام خاصية max-width بدلاً من ذلك.

استخدام خاصية max-width
إذا تم تعيين خاصية max-width  إلى 100٪ ، فسيتم تصغير الصورة إذا لزم الأمر ، ولكن لا يتم تكبيرها أبدًا لتصبح أكبر من حجمها الأصلي:
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
عرض صور مختلفة حسب عرض المتصفح
 يتيح لك عنصر <picture> في HTML تحديد صور مختلفة لأحجام الشاشات  المختلفة.
<!DOCTYPE html>
<html>
<head>
<base href='https://www.w3schools.com/html/'/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body dir="rtl">

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

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_5terre.jpg" media="(max-width: 1000px)">
  <source srcset="flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

</body>
</html>
حجم النص المتجاوب
يمكن تعيين حجم النص باستخدام وحدة "vw" ، مما يعني "viewport width".
بهذه الطريقة ، سيتبع حجم النص حجم نافذة المتصفح:

مرحبا بالعالم
قم بتغيير حجم نافذة المتصفح لترى كيف يتغير حجم النص.
مثال
  
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body dir='rtl'>

<h1 style="font-size:10vw;">نص متجاوب</h1>

<p style="font-size:5vw;">قم بتغيير حجم نافذة المتصفح لترى كيف يتغير حجم النص.</p>

<p style="font-size:5vw;">استخدم وحدة "vw" عند تحجيم النص. سيعمل 10vw على تعيين الحجم على 10٪ من عرض  الشاشة.</p>

<p> منفذ العرض هو حجم نافذة المتصفح. 1vw = 1٪ من عرض  المتصفح. إذا كان عرض  المتصفح 50 سم ، يكون 1vw 0.5 سم.</p>

</body>
</html>
منفذ العرض هو حجم نافذة المتصفح. 1vw = 1٪ من عرض المتصفح. إذا كان عرض المتصفح 50 سم ، يكون 1vw 0.5 سم.
استعلامات Media Queries
بالإضافة إلى تغيير حجم النص والصور ، من الشائع أيضًا استخدام استعلامات Media في صفحات الويب سريعة الاستجابة.
باستخدام استعلامات Media ، يمكنك تحديد أنماط style وتنسيقات مختلفة تمامًا لأحجام المتصفحات المختلفة.
مثال:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.left {
  background-color: #9cc;
  padding: 20px;
  float: left;
  width: 20%; /* العرض 20٪ افتراضيًا*/
}

.main {
  background-color: #f1f1f1;
  padding: 20px;
  float: left;
  width: 60%; /*العرض 60٪ افتراضيًا */
}

.right {
  background-color: #799;
  padding: 20px;
  float: left;
  width: 20%; /* العرض 20٪ افتراضيًا */
}

/* (700px) هذا الاستعلام سينفذ اذا  وصل عرض المتصفح الى   : */
@media screen and (max-width: 700px) {
  .left, .main, .right {
    width: 100%; /* يكون العرض 100٪ عندما يكون حجم إطار العرض 700 بكسل أو أصغر*/
  }
}
</style>
</head>
<body dir='rtl'>

<h2>Media Queries استعلامات </h2>
<p>قم بتغيير حجم نافذة المتصفح لمشاهدة تغييرها.</p>

<p>تأكد من الوصول إلى نقطة التوقف عند 700 بكسل عند تغيير حجم هذا الإطار.</p>

<div class="left">
  <p>القائمة اليسرى</p>
</div>

<div class="main">
  <p>المحتوى الرئيسي</p>
</div>

<div class="right">
  <p>المحتوى الايمن</p>
</div>

</body>
</html>
صفحة الويب المستجيبة - مثال كامل
يجب أن تكون صفحة الويب سريعة الاستجابة   على شاشات سطح المكتب الكبيرة وعلى الهواتف المحمولة الصغيرة.
<!DOCTYPE html>
<html>
<head> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}
  body{font-family:tahoma;}
.menu {
  float: left;
  width: 20%;
  text-align: center;
}

.menu a {
  background-color: #e5e5e5;
  padding: 8px;
  margin-top: 7px;
  display: block;
  width: 100%;
  color: black;
}

.main {
  float: left;
  width: 60%;
  padding: 0 20px;
}

.right {
  background-color: #e5e5e5;
  float: left;
  width: 20%;
  padding: 15px;
  margin-top: 7px;
  text-align: center;
}

@media only screen and (max-width: 620px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width: 100%;
  }
}
</style>
</head>
<body dir='rtl'>

<div style="background-color:#e5e5e5;
            padding:15px; 
            display: flex;
            justify-content: space-between;
            align-items: center;">
  <div>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRuQItO7ULD23x0J5jNDAR5GH3BiZePRP8Vphyphenhyphengd5Y88QXXjUbm9SS5wwRngLphIQSFBbogXzVSXX-fsmJkate2Qg8HcWoxGPl8ALm8_sk3Oji5psfSsKv5mU6gQO2SSurS6GECL5Zb559/w800/ITQA7.png' style='width:120px; '>
  </div>
  <h1 style="font-size:5vw;">مرحبا العالم</h1>
</div>

<div style="overflow:auto">
  <div class="menu">
    <a href="#">الرابط 1</a>
    <a href="#">الرابط 2</a>
    <a href="#">الرابط 3</a>
    <a href="#">الرابط 4</a>
  </div>

  <div class="main">
    <h2>تعريف بالجزائر</h2>
    <p>تلقب ببلد المليون ونصف المليون شهيد نسبة لعدد شهداء ثورة التحرير الوطني التي دامت سبع سنوات ونصف. يعيش معظم الجزائريين في شمال البلاد قرب الساحل، لاعتدال المناخ وتوفر الأراضي الخصبة. ووفقا للمادة الثانية من دستور البلاد فإن الدين الرسمي للدولة الجزائرية هو الإسلام،.</p>
  </div>

  <div class="right">
    <h2>من هي</h2>
    <p>هي دولة عربية ذات سيادة تقع في شمال أفريقيا. عاصمتها وأكثر مدنها اكتظاظا بالسكان هي مدينة الجزائر.</p>
  </div>
</div>

<div style="background-color:#e5e5e5;text-align:center;padding:10px;margin-top:7px;">© copyright https://itqan7.blogspot.com/</div>

</body>
</html>
المكتبات و الأطر CSS Frameworks
تقدم جميع CSS Frameworks الشائعة تصميمًا سريع الاستجابة.

إنها مجانية وسهلة الاستخدام.
Bootstrap
إطار العمل الشائع هو Bootstrap. يستخدم Bootstrap HTML و CSS و jQuery لإنشاء صفحات ويب سريعة الاستجابة.
مثال
الدرس السابق الدرس التالي
القسم: