• 0

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

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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

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

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

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

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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

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

Screenshot from 2016-06-16 19:18:43.png

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

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

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن