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