تصميم الويب الم-responsive في HTML

ما هو تصميم الويب الديناميكي؟

  • RWD تعني تصميم الويب الديناميكي (Responsive Web Design)
  • RWD يمكنه نقل صفحة الويب بجميع الأحجام
  • RWD ضروري لللوحات المحمولة والأجهزة المحمولة

إنشاء تصميم ديناميكي خاص بك

طريقة واحدة لإنشاء تصميم ديناميكي هي القيام بذلك بنفسك:

!DOCTYPE html
<html lang="ar-EG">
<head>
<style>
.city {
على اليسار;
边际: 5px;
ملء: 15px;
عرض: 300px;
ارتفاع: 300px;
حافة: 1px ملساء أسود;
} 
</style>
</head>
<body>
<h1>عرض CodeW3C.com</h1>
<h2>تعديل هذه الصفحة الديناميكية!</h2>
<br>
<div class="city">
<h2>لندن</h2>
<p>لندن عاصمة إنجلترا.</p>
<p>إنها أكبر مدينة في المملكة المتحدة،
<p>مع منطقة حضرية تزيد عن 13 مليون نسمة.</p>
</div>
<div class="city">
<h2>باريس</h2>
<p>باريس عاصمة فرنسا، وأكبر مدينة مأهولة بالسكان.</p>
</div>
<div class="city">
<h2>توكيو</h2>
<p>توكيو عاصمة اليابان، مركز منطقة توكيو الكبرى،
وهي أكبر منطقة حضرية في العالم.</p>
</div>
</body>
</html>

تجربة شخصية

استخدام Bootstrap

طريقة أخرى لإنشاء تصميم ديناميكي هي استخدام إطارات CSS جاهزة.

Bootstrap هو أحدث إطار عمل HTML، CSS، وJS للتصميم الديناميكي للويب.

Bootstrap يساعدك في تطوير مواقع جذابة بجميع الأحجام: شاشات، حواسيب محمولة، أجهزة لوحية أو هواتف محمولة:

!DOCTYPE html
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" 
  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
  <h1>عرض CodeW3C.com</h1> 
  <p>تعديل هذه الصفحة التفاعلية!</p> 
</div>
</div>
<div class="container">
<div class="row">
  <div class="col-md-4">
    <h2>لندن</h2>
    <p>لندن عاصمة إنجلترا.</p>
    <p>إنها أكبر مدينة في المملكة المتحدة،
    <p>مع منطقة حضرية تزيد عن 13 مليون نسمة.</p>
  </div>
  <div class="col-md-4">
    <h2>باريس</h2>
    <p>باريس عاصمة فرنسا، وأكبر مدينة مأهولة بالسكان.</p>
  </div>
  <div class="col-md-4">
    <h2>توكيو</h2>
    <p>توكيو عاصمة اليابان، مركز منطقة توكيو الكبرى،
    وهي أكبر منطقة حضرية في العالم.</p>
  </div>
</div>
</div>
</body>
</html>

تجربة شخصية

للتعلم أكثر عن Bootstrap، يرجى قراءة دليل Bootstrap.