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