اذهب إلى المحتوى
  • 0

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

Blackhacker

السؤال

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 1

يمكنك استخدام 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

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...