توافق الموقع مع جميع أحجام الشاشات Html +css

السلام عليكم 

يجب عليك ان تستخدم الBootstrap وسيسهل عليك مهمة جعل التصميم متوافق

مع شاشات الحاسوب المختلفة والايباد والتلفون.

اما اذا كنت لا تريد استخدام الBootstrap فيجب عليك ان تستخدم الmedia queries 

وهي عبارة عن قواعد تحكم وضع العناصر الموجودة في التصميم حسب حجم الشاشة 

مما يسهل عليك انشاء واجهات متوافقة مع الجوال .

مثال بسيط على الmedia queries:

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

في هذا المثال يتم تغيير لون الخلفية الى الاخضر في حالة أن تكون الشاشة أكبر من أو تساوي 

480px .

وقس على ذلك فشاشات الهاتف تكون :

320px

375px

480px

.

. 

768px

ولكنني انصحك بأن تقوم بتعلم الbootstrap.

بتاريخ 7 ساعات قال عبد الله محمد5:

السلام عليكم 

يجب عليك ان تستخدم الBootstrap وسيسهل عليك مهمة جعل التصميم متوافق

مع شاشات الحاسوب المختلفة والايباد والتلفون.

اما اذا كنت لا تريد استخدام الBootstrap فيجب عليك ان تستخدم الmedia queries 

وهي عبارة عن قواعد تحكم وضع العناصر الموجودة في التصميم حسب حجم الشاشة 

مما يسهل عليك انشاء واجهات متوافقة مع الجوال .

مثال بسيط على الmedia queries:

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

في هذا المثال يتم تغيير لون الخلفية الى الاخضر في حالة أن تكون الشاشة أكبر من أو تساوي 

480px .

وقس على ذلك فشاشات الهاتف تكون :

320px

375px

480px

.

. 

768px

ولكنني انصحك بأن تقوم بتعلم الbootstrap.

شكرا لك اخي ولكني محدد ب html css لضيق الوقت 

لجعل البرنامج يتوافق مع جميع الاجهزة نستخدم media queries وهي ميزة في CSS3 تتيح لك تحديد وقت تطبيق قواعد CSS معينة. يتيح لك ذلك تطبيق CSS خاص للجوال ومختلف الشاشات ، أو ضبط تخطيط للطباعة. تبدو البنية الأساسية كما يلي:

#header-image {
    background-repeat: no-repeat;
    background-image:url('image.gif');
}

// عرض صورة أكبر عندما تكون على شاشة كبيرة
@media screen and (min-width: 1200px) {
    #header-image {
        background-image:url('large-image.gif');
    }
}

//  إزالة صورة الهيدر عند الطباعة.
@media print {
    #header-image {
        display: none;
    }
}

ولكن يمكن أيضًا استخدامها بهذا الشكل:

<link rel='stylesheet' media='all' href='normal.css' />
<link rel='stylesheet' media='print' href='print.css' />
<link rel='stylesheet' media='screen and (min-width: 701px)' href='medium.css' />

يوضح هذا المثال الكتلتين على الشاشات الكبيرة بجوار بعضهما البعض ، بينما سيتم عرضهما على الشاشات الصغيرة أسفل بعضهما البعض.

#block1, #block2 {
    float: left;
    width: 100%;
}

@media (min-width: 1000px) {
    #block1, #block2 {
        width: 50%;
    }
}

تستطيع ارفاق العديد من الملفات باستحدام خاصية multiple كما هو موضح في المثال الآتي

  <input type="file" id="files" name="files" multiple><br><br>