صفحة الويب الخاصة بك ينبغي أن تبدو جيدة، ويكون سهل الاستخدام، بغض النظر عن الجهاز.
ما هو تصميم الويب سريع الاستجابة؟
استجابة تصميم الموقع يجعل صفحة الويب الخاصة بك تبدو جيدة على جميع الأجهزة (desktops, tablets, and phones) .
استجابة تصميم الموقع هو حول استخدام CSS و HTML لتغيير، إخفاء، يتقلص، تكبير، أو نقل المحتوى لجعلها تبدو جيدة على أي شاشة:
إنشاء تصميم الاستجابة بنفسك
طريقة واحدة لإنشاء تصميم استجابة، هو خلق بنفسك:
مثال
<!DOCTYPE html>
<html lang="en-us">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Responsive Web Design Demo</h1>
<div class="city">
<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="city">
<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="city">
<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>
</body>
</html> انها محاولة لنفسك » باستخدام W3.CSS
وهناك طريقة أخرى لإنشاء تصميم استجابة، هو استخدام ورقة أنماط الاستجابة، مثل W3.CSS
W3.CSS يجعل من السهل لتطوير المواقع التي تبدو لطيفة في أي حجم. سطح المكتب، وكمبيوتر محمول، الكمبيوتر اللوحي، أو الهاتف:
W3.CSS تجريبي
تغيير حجم الصفحة تستجيب!
لندن
لندن هي عاصمة إنجلترا.
وهذه هي المدينة الأكثر اكتظاظا بالسكان في المملكة المتحدة، مع المنطقة الحضرية لأكثر من 13 مليون نسمة.
باريس
باريس هي عاصمة فرنسا.
منطقة باريس هي واحدة من أكبر المراكز السكانية في أوروبا، مع أكثر من 12 مليون نسمة.
طوكيو
طوكيو هي عاصمة اليابان.
ومن وسط طوكيو الكبرى، ومنطقة العاصمة الأكثر اكتظاظا بالسكان في العالم.
مثال
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<body>
<div class="w3-container w3-orange">
<h1>W3.CSS Demo</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> انها محاولة لنفسك » لمعرفة المزيد عن W3.CSS، اقرأ W3.CSS التعليمي .