HTML ريسبونسف
يتعلق تصميم الويب المستجيب باستخدام HTML و CSS لتغيير حجم موقع ويب أو إخفاءه أو تقليصه أو تكبيره تلقائيًا لجعله يبدو جيدًا على جميع الأجهزة (أجهزة الكمبيوتر المكتبية والأجهزة اللوحية والهواتف)
ملاحظة: يجب أن تبدو صفحة الويب جيدة على أي جهاز !
وضع Viewport
عند إنشاء صفحات الويب سريعة الاستجابة ، أضف <meta>العنصر التالي في جميع صفحات الويب الخاصة بك:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
سيؤدي ذلك إلى تعيين إطار العرض لصفحتك ، والذي سيعطي إرشادات المتصفح حول كيفية التحكم في أبعاد الصفحة وتوسيع نطاقها.
فيما يلي مثال لصفحة ويب بدون علامة meta viewport ونفس صفحة الويب التي بها علامة meta viewport:
الصور المستجيبة
الصور المستجيبة عبارة عن صور تتقيس بشكل جيد لتناسب أي حجم للمتصفح.
باستخدام خاصية العرض
إذا widthتم تعيين خاصية CSS على 100٪ ، فستكون الصورة سريعة الاستجابة وصعودًا ونزولًا:
<img src="platformspot.jpg" style="width:100%;">
لاحظ أنه في المثال أعلاه ، يمكن تكبير الصورة لتصبح أكبر من حجمها الأصلي. الحل الأفضل ، في كثير من الحالات ، هو استخدام max-width بدلاً من ذلك.
باستخدام خاصية العرض الأقصى
إذا max-widthتم تعيين الخاصية إلى 100٪ ، فستقلص الصورة إذا كان يجب عليها ذلك ، ولكن لن تزيد حجمها أبدًا عن الحجم الأصلي:
<img src="platformspot.jpg" style="max-width:100%;height:auto;">
عرض صور مختلفة حسب عرض المتصفح
<picture>يتيح لك عنصر HTML تحديد صور مختلفة لأحجام نافذة متصفح مختلفة.
<picture>
<source srcset="platformspot.jpg" media="(max-width: 600px)">
<source srcset="platformspot.jpg" media="(max-width: 1500px)">
<source srcset="platformspot.jpg">
<img src="platformspot.jpg" alt="platformspot">
</picture>
حجم النص المستجيب
يمكن ضبط حجم النص بوحدة “vw” ، مما يعني “عرض منفذ العرض”.
بهذه الطريقة ، سيتبع حجم النص حجم نافذة المتصفح:
<h1 style="font-size:10vw">Hello World</h1>
Viewport هو حجم نافذة المتصفح. 1vw = 1٪ من عرض منفذ العرض. إذا كان إطار العرض 50 سم ، 1vw 0.5 سم.
Media Queries
بالإضافة إلى تغيير حجم النص والصور ، من الشائع أيضًا استخدام استعلامات الوسائط في صفحات الويب سريعة الاستجابة.
باستخدام استعلامات الوسائط ، يمكنك تحديد أنماط مختلفة تمامًا لأحجام متصفح مختلفة.
مثال: قم بتغيير حجم نافذة المتصفح لمعرفة أن عناصر div الثلاثة أدناه ستعرض أفقياً على شاشات كبيرة ومكدسة رأسياً على شاشات صغيرة:
<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 a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>
استجابة تصميم الويب
هناك العديد من أطر CSS الحالية التي تقدم تصميم مستجيب.
إنها مجانية وسهلة الاستخدام.
باستخدام W3.CSS
هناك طريقة رائعة لإنشاء تصميم متجاوب ، وهي استخدام ورقة أنماط سريعة الاستجابة ، مثل W3.CSS
يجعل W3.CSS من السهل تطوير المواقع التي تبدو لطيفة بأي حجم ؛ سطح المكتب أو الكمبيوتر المحمول أو الجهاز اللوحي أو الهاتف:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.platformspot.com">
<body>
<div class="w3-container w3-green">
<h1>platformspot</h1>
<p>Resize this responsive page!</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>
Bootstrap
إطار عمل شائع آخر هو Bootstrap ، ويستخدم HTML و CSS و jQuery لإنشاء صفحات ويب سريعة الاستجابة.
<!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/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My First Bootstrap Page</h1>
</div>
<div class="row">
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
</div>
</div>
</body>
</html>
One Comment