در قسمت اول به مواردی اشاره کردم و توضیحات مختصری برای هرکدام دادم. مثلا گفتم که قالب خود را در کدام مرورگرها تست کنید و یک سری موارد اولیه را مطرح کردم.
در این قسمت به یکی از مواردی که به کرات دیده میشه می پردازم و امیدوارم مفید واقع بشه!
همونطور که میدونید مونیتورهای نسل جدید، اکثرا عریض (wide) شده اند و رزولوشن در آنها افزایش یافته. این مورد بسیار مهم و قابل اهمیت است! چرا که اگر شما در مقدار دهی به حاشیه بلوک های اصلی قالب، از واحد مناسبی استفاده نکنید، قطعا دچار مشکل می شوید!
واضح تر میگویم. به عنوان مثال مونیتور شما دارای رزولوشن 1024×768 هست! قالب خود را طراحی میکنید. بعد همین قالب را در رزولوشن 1200×800 نگاه میکنید! بر خلاف انتظارتان محتوای قالب به سمت چپ یا سمت راست صفحه نزدیک شده است! در صورتی که در حالت عادی باید وسط صفحه قرار داشته باشد! اما نگران نباشید! خیلی راحت میشود مشکل را برطرف کرد. درواقع شما واحد مناسبی را برای مقداردهی به حاشیه ها (margin) انتخاب نکرده اید! مثلا از واحد px یا em استفاده کرده اید!
حالا چکار باید بکنیم؟!
باید از واحد درصد – % – استفاده کنید! مثلا بجای اینکه بگویید:
Margin-left: 370px;
بگویید:
Margin-left: 30%;
بیشتر توضیح میدم. واحدهای px یا em، یک مقدار ثابت ایجاد میکنن. یعنی مثلا همیشه حاشیه ی فلان عنصر 300 پیکسل از سمت راستش فاصله داشته باشه! خب، این کار اشتباه نیست، اما مشکل زمانی ایجاد میشه که رزولوشن تغییر بکنه! در این صورت هست که محتوای قالب، دیگه وسط صفحه قرار نمیگیره و مثلا به سمت راست یا چپ نزدیک میشه!
اما وقتی که به صورت درصدی، به حاشیه ی فلان عنصر، مقدار میدید، دیگه این مقدار، ثابت نیست. یعنی با توجه به رزولوشن، مثلا 20 درصد از سمت راست، فاصله ایجاد میشه!
برای درک راحت تر قضیه، تصاویر زیر رو آماده کردم. ببینید:
در تصویر زیر، طراح با استفاده از واحد پیکسل، به بلوک ها فاصله داده. در رزولوشن 1024×768، هیچ مشکلی دیده نمیشه و همه چیز سر جاش هست:
اما همین طرح در رزولوشن 1200×800، به سمت راست نزدیک شده:
طراح به اشتباه خودش پی برد و واحد درصد – % – رو جایگزین واحد پیکسل – px – کرد:
با تغییر رزولوشن، هیچ جابجایی ای در قالب ایجاد نشد و همه چیز همونطور هست که باید باشه:
البته نکته ای که هست، ما برای وسط آوردن طرح کلا از این روش استفاده نمیکنیم. این ها فقط مثال بودند برای درک واحد درصد.
ضمنا یک موردی رو هم بگم. استفاده از واحد em برای مقداردهی به حاشیه ها و غیره، اصلا توصیه نمیشه. کاربرد این واحد بیشتر برای تعیین اندازه ی فونت است!
خب، برای این قسمت، تا همینجا کافیه. اگر جالب نبود، بگذارید به حساب بی تجربگی بنده ;)
