ما هو تصميم الويب سريع الاستجابة؟
تصميم الويب سريع الاستجابة يتعلق باستخدام HTML و CSS لتغيير حجم موقع الويب تلقائيًا.
يتعلق تصميم الويب سريع الاستجابة بجعل موقع الويب يبدو جيدًا على جميع الأجهزة (أجهزة الكمبيوتر المكتبية والأجهزة اللوحية والهواتف):
إعداد منفذ العرض
عند إنشاء صفحات ويب سريعة الاستجابة ، أضف <meta>العنصر التالي إلى جميع صفحات الويب الخاصة بك:
مثال
<meta name="viewport" content="width=device-width, initial-scale=1.0">
تساؤلات الإعلام
تلعب استعلامات الوسائط دورًا مهمًا في صفحات الويب سريعة الاستجابة.
باستخدام استعلامات الوسائط ، يمكنك تحديد أنماط مختلفة لأحجام المستعرضات المختلفة.
مثال:
قم بتغيير حجم نافذة المتصفح لترى أن العناصر الثلاثة أدناه ستعرض أفقيًا على الشاشات الكبيرة وعموديًا على الشاشات الصغيرة:
مثال
<style>
.left, .right {
float: left;
width: 20%; /* The width is 20%, by default */
}
.main {
float: left;
width: 60%; /* The width is 60%, by default */
}
/* Use Media Query to
add a breakpoint at 800px: */
@media screen and (max-width:800px) {
.left , .main, .right {width:100%;}
}
</style>
تعرف على المزيد حول تصميم الويب سريع الاستجابة في
البرنامج التعليمي RWD الخاص بـ W3Schools
صور مستجيبة
Responsive images are images that scale nicely to fit any browser size.
When the CSS width property is set to a percentage value, an image will scale up and down when resizing the browser window.
This image is responsive:
Example
<img
src="img_girl.jpg" style="width:80%;height:auto;">
If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:
Example
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
Image Depending on Browser Size
The HTML <picture> element allows you to define different images for
different browser window sizes.
Example
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
600px)">
<source srcset="img_flowers.jpg" media="(max-width:
1500px)">
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg"
alt="Flowers">
</picture>
Responsive W3.CSS
W3.CSS is a free CSS Framework that offers Responsive Design by default.
W3.CSS makes it easy to develop sites that look nice on any device; desktop, laptop, tablet, or phone:
Example
<!DOCTYPE html>
<html>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-center w3-padding-64 w3-light-grey">
<h1>My W3.CSS Page</h1>
<p>Resize this page to see the responsive effect!</p>
</div>
<div
class="w3-row-padding">
<div class="w3-third">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div>
<div
class="w3-third">
<h2>Paris</h2>
<p>Paris is
the capital of France.</p>
<p>The Paris area is one of the largest
population centers in Europe,
with more than 12 million
inhabitants.</p>
</div>
<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It
is the center of the Greater Tokyo Area,
and the most populous
metropolitan area in the world.</p>
</div>
</div>
</body>
</html>
To learn more about W3.CSS, go to our W3.CSS Tutorial.
Bootstrap
Bootstrap is a very popular framework that uses HTML, CSS and jQuery to make responsive web pages.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap
Example</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My
First Bootstrap Page</h1>
<p>Resize this responsive page to see the
effect!</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="col-sm-4">
<h2>Paris</h2>
<p>Paris is
the capital of France.</p>
<p>The Paris area is one of the largest
population centers in Europe,
with more than 12 million
inhabitants.</p>
</div>
<div
class="col-sm-4">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It
is the center of the Greater Tokyo Area,
and the most populous
metropolitan area in the world.</p>
</div>
</div>
</div>
</body>
</html>
To learn more about Bootstrap, go to our Bootstrap Tutorial.