يواجه العديد من طلاب تصميم الويب سريع الاستجابة صعوبة في استخدام النسب المئوية لقيم العرض. على وجه التحديد ، هناك ارتباك في كيفية حساب المتصفح لتلك النسب المئوية. ستجد أدناه شرحًا تفصيليًا لكيفية عمل النسب المئوية لحسابات العرض في موقع ويب سريع الاستجابة.
استخدام البكسل لقيم العرض
عندما تستخدم ملفات بكسل كقيمة عرض ، تكون النتائج واضحة جدًا. إذا كنت تستخدم CSS لتعيين قيمة عرض عنصر في رأس المستند إلى 100 بكسل عرضًا ، سيكون هذا العنصر هو نفس الحجم الذي قمت بتعيينه على 100 بكسل عرضًا في محتوى موقع الويب أو تذييله أو مناطق أخرى من الصفحة. تعد وحدات البكسل قيمة مطلقة ، لذا فإن 100 بكسل هي 100 بكسل بغض النظر عن مكان ظهور العنصر في وثيقتك. لسوء الحظ ، على الرغم من سهولة فهم قيم البكسل ، إلا أنها لا تعمل بشكل جيد مع مواقع الويب سريعة الاستجابة.
ابتكر إيثان ماركوت المصطلح "تصميم الويب سريع الاستجابة" ، موضحًا هذا النهج على أنه يحتوي على 3 مبادئ رئيسية:
- شبكة السوائل
- وسائط السوائل
- تساؤلات الإعلام
يتم تحقيق هاتين النقطتين الأوليين ، الشبكة المرنة ، والوسائط المرنة باستخدام النسب المئوية ، بدلاً من وحدات البكسل ، لقيم التحجيم.
استخدام النسب المئوية لقيم العرض
عندما تستخدم النسب المئوية لإنشاء عرض لعنصر ما ، فإن الحجم الفعلي الذي يعرضه هذا العنصر سيختلف بناءً على مكانه في المستند. النسب المئوية هي قيمة نسبية ، مما يعني أن الحجم المعروض يتعلق بالعناصر الأخرى في وثيقتك.
على سبيل المثال ، إذا قمت بتعيين عرض ملف صورة حتى 50٪ ، فهذا لا يعني أن الصورة ستعرض بنصف حجمها الطبيعي. هذا هو مفهوم خاطئ شائع.
إذا كان عرض الصورة في الواقع 600 بكسل ، فإن استخدام قيمة CSS لعرضها بنسبة 50٪ لا يعني أنها ستكون بعرض 300 بكسل في متصفح الويب. يتم حساب قيمة النسبة المئوية هذه بناءً على العنصر الذي يحتوي على تلك الصورة ، وليس الحجم الفعلي للصورة نفسها. إذا كانت الحاوية (التي يمكن أن تكون قسمًا أو عنصر HTML آخر) بعرض 1000 بكسل ، فسيتم عرض الصورة عند 500 بكسل نظرًا لأن هذه القيمة تمثل 50٪ من عرض الحاوية. إذا كان عرض العنصر المحتوي 400 بكسل ، فلن يتم عرض الصورة إلا عند 200 بكسل ، نظرًا لأن هذه القيمة تمثل 50٪ من الحاوية. الصورة المعنية هنا بحجم 50٪ والتي تعتمد كليًا على العنصر الذي يحتويها.
تذكر أن التصميم سريع الاستجابة يتسم بالسلاسة. ستتغير التخطيطات والأحجام باسم حجم الشاشة / تغييرات الجهاز. إذا كنت تفكر في هذا من الناحية المادية وغير المتعلقة بالويب ، فهذا يشبه امتلاكك لصندوق من الورق المقوى تملأه بمواد التعبئة. إذا قلت أن الصندوق يجب أن يكون نصف مملوء بهذه المادة ، فإن كمية التعبئة التي تحتاجها ستختلف حسب حجم الصندوق. وينطبق الشيء نفسه على نسبة العرض في تصميم الويب.
نسب مبنية على نسب أخرى
في مثال الصورة / الحاوية ، استخدمنا قيم البكسل للعنصر المحتوي لإظهار كيفية عرض الصورة المتجاوبة. في الواقع ، سيتم أيضًا تعيين العنصر المحتوي كنسبة مئوية وستحصل الصورة أو العناصر الأخرى ، داخل تلك الحاوية ، على قيمها بناءً على نسبة مئوية.
إليك مثال آخر.
لنفترض أن لديك موقع ويب حيث يتم احتواء الموقع بالكامل داخل قسم به فئة من "الحاوية" (ممارسة شائعة لتصميم الويب). يوجد داخل هذا التقسيم ثلاثة أقسام أخرى ستظهر في النهاية على هيئة ثلاثة أعمدة رأسية.
الآن ، يمكنك استخدام CSS لتعيين حجم قسم "الحاوية" على 90٪. في هذا المثال ، لا يحتوي قسم الحاوية على عنصر آخر يحيط به غير الجسم ، والذي لم نقم بتعيينه على أي قيمة محددة. بشكل افتراضي ، سيتم عرض النص على هيئة 100٪ من نافذة المتصفح. لذلك ، ستعتمد النسبة المئوية لقسم "الحاوية" على حجم نافذة المتصفح. نظرًا لتغير حجم نافذة المتصفح ، سيتغير حجم هذه "الحاوية". لذلك إذا كان عرض نافذة المتصفح 2000 بكسل ، فسيتم عرض هذا التقسيم بدقة 1800 بكسل. يتم حساب هذا على أنه 90 بالمائة من 2000 (2000 × .90 = 1800)) ، وهو حجم المتصفح.
إذا تم تعيين كل قسم من أقسام "العمود" الموجودة داخل "الحاوية" على حجم 30٪ ، فسيكون عرض كل منها 540 بكسل في هذا المثال. يتم حساب هذا على أنه 30٪ من 1800 بكسل التي تعرضها الحاوية عند (1800 × .30 = 540). إذا قمنا بتغيير النسبة المئوية لتلك الحاوية ، فإن هذه الأقسام الداخلية ستتغير أيضًا في الحجم الذي يتم عرضها به نظرًا لأنها تعتمد على عنصر الحاوية هذا.
لنفترض أن نوافذ المتصفح تظل بعرض 2000 بكسل ، لكننا قمنا بتغيير النسبة المئوية لقيمة الحاوية إلى 80٪ بدلاً من 90٪. هذا يعني أنه سيتم عرضه عند 1600 بكسل الآن (2000 × .80 = 1600). حتى إذا لم نغير CSS لحجم أقسامنا الثلاثة "col" ، وتركناها عند 30٪ ، فسوف عرض بشكل مختلف الآن حيث أن العنصر الذي يحتوي عليه ، وهو السياق الذي يتم تغيير حجمهم به ، يحتوي على تغير. سيتم عرض هذه الأقسام الثلاثة الآن بعرض 480 بكسل لكل منها ، أي 30٪ من 1600 ، أو حجم الحاوية 1600 × .30 = 480).
إذا أخذنا هذا إلى أبعد من ذلك ، إذا كانت هناك صورة داخل أحد أقسام "العمود" وتم تغيير حجم تلك الصورة باستخدام النسبة المئوية ، فسيكون سياق حجمها هو "العمود" نفسه. وبما أن هذا التقسيم "العمود" تغير في الحجم ، كذلك تغيرت الصورة بداخله. لذلك إذا تغير حجم المتصفح أو "الحاوية" ، فسيؤثر ذلك على أقسام "العمود" الثلاثة ، والتي بدورها ، تغيير حجم الصورة داخل "العمود". كما ترى ، كل هذه الأشياء مرتبطة عندما يتعلق الأمر بالحجم الذي يعتمد على النسبة المئوية القيم.
عندما تفكر في كيفية عرض عنصر داخل صفحة ويب عند استخدام قيمة النسبة المئوية لعرضه ، فإنك تحتاج إلى فهم السياق الذي يوجد فيه هذا العنصر في ترميز الصفحة.
باختصار
تلعب النسب المئوية دورًا مهمًا في إنشاء تخطيط لمواقع الويب سريعة الاستجابة. سواء كنت تقوم بتغيير حجم الصور بشكل متجاوب أو تستخدم نسب عرض لإنشاء شبكة مرنة حقًا بأحجامها مرتبطة ببعضها البعض ، سيكون فهم هذه الحسابات ضروريًا لتحقيق المظهر الذي تريده رغبة.