ربط ملفات html مع بعضها وجعل الموقع متجاوب

تلك ليست الطريقة الصحيحة، فلا يتم إنشاء كود HTML آخر لمواقع الويب، الصحيح هو تعديل التنسيق ليتناسب مع الشاشات المختلفة من خلال ميزة Media queries في CSS.

أي في نفس ملف CSS الذي قمت بتضمينه في الصفحة، لكن أحيانًا عند وجود الكثير من الأكواد أي التنسيقات اللازم تعديلها نقوم بإنشاء ملف CSS مُنفصل للـ Media queries.

أي تحديد أحجام شاشات معينة ثم تطبيق تنسيق مختلف لكل منها:

@media only screen and (max-width: 1200px){
    /*Tablets [601px -> 1200px]*/
}
@media only screen and (max-width: 600px){
	/*Big smartphones [426px -> 600px]*/
}
@media only screen and (max-width: 425px){
	/*Small smartphones [325px -> 425px]*/
}

وبالطبع لا نقوم بإعادة كتابة كامل التنسيقات للموقع، بل نقوم بتعديل التنسيق قليلاً حسب التصميم ليتناسب مع أحجام الشاشات المختلفة.

ستجد تفصيل هنا: