كيف أجعل موقعي يتناسب مع "شاشات" الجوالات المحمولة؟ و ما هي التعليمات البرمجيّة اللازمة لذلك؟

قم بتحديد "عرض الحاوية" التي تحوي عناصر الموقع ضمنها بعرض مناسب لشاشات الهاتف.
فمثلاً لو كانت قيم أبعاد الحاوية كما في الشيفرة التالية:

#header{
    width: 1000px;
}
#header .logo{
    font-size: 18px;
}

إستبدلها بالشيفرة التالية:

@media (max-width: 800px) {
    #header{
        width: 700px;
    }
    #header .logo{
        font-size: 14px;
    }

يعد إستخدام الشيفرة السابقة سيتناسب حجم العناصر مع عرض الشاشة، فعندما تقوم بفتح الموقع على شاشة مقاسها 800 بيكسل، سيتم تصغير العناصر وإلغاء المساحات الفارغة.

بإستخدام media queries و هي تمكنك من تغيير properties لـــ selectors عند اي عرض لــ browser window و حتى لتحسن مظهر الـweb page كي تصبح قابلة للطباعة