كيف أنشئ صفحة تدعم جميع أحجام الشاشات؟

Blackhacker · 15 يونيو 2016

أريد إنشاء صفحة ويب باستخدام HTML وCSS تدعم جميع أحجام الشاشات، لأني أنشأت صفحة ويب ووجدتها على شاشتي مناسبة لكن عند تغيير الحاسوب تتداخل العناصر، فكيف أحل هذه المشكلة؟

هشام رزق الله · 15 يونيو 2016

يمكنك استخدام Media query، وهي تقنية جديدة ظهرت في CSS3 لتنفيذ خصائص وتنسيقات معينة حسب أبعاد الشاشة، وهذا مثال بسيط على هذه التقنية حيث سيتم تلوين خلفية الشاشة بلون أزرق فاتح إذا كان حجم الشاشة أقل من 500 بيكسل:

 @media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}

للمزيد من الأمثلة والشرح على هذه التقنية أنصحك بالإطلاع على هذا الدرس.

إذا لم ترغب بعمل ذلك بشكل يدوي فيمكنك استخدام اطار بوتسترات الذي سيسهل عليك هذا الأمر كثيرا، حيث سيحدد خصائص الصفحة وMedia query بشكل تلقائي.

E.Nourddine · 16 يونيو 2016

التصميم المتجاوب يعتمد بالأساس على تقنية css3 والتي تُحدّد عرض الشاشة المستعملة وبالتالي الكود الخاصة بهذا المقاس من الشاشات، أي أنها تُخصّص تصميم لكل مقاس ويقوم كود css بعرضه عند مطابقة الشرط، نعطي صورة أوضح:

مثال لكود متجاوب:

<!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>

كما تمت الاشارة من هشام، يُنصح باعتماد أطر العمل الخاصة بـcss لبناء موقع متجاوب، وذلك نظرا لسهولة استعمالها -أطر العمل frameworks- نجد أشهرها bootstrap.

ألق نظرة على دروس أكاديمة حسوب خاصة ببوتستراب.

الموقع الرسمي لـ Bootstrap

كيف أنشئ صفحة تدعم جميع أحجام الشاشات؟

السؤال

Blackhacker

2 أجوبة على هذا السؤال

Recommended Posts

هشام رزق الله

E.Nourddine

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية