ترفندهای بهینه سازی قالب سایت برای Print گرفتن - قسمت 1



visibility  
mode_comment   ۰

فرض کنید وارد این سایت میشیم و کلیدهای ترکیبی Ctrl + P رو فشار میدیم تا از صفحه مورد نظر Print بگیریم. چیزی که مشاهده میکنیم، بصورت زیر خواهد بود:

همونطور که میبینید هیچی سر جای خودش نیست و این سایت اصلا قابلیت پرینت گرفتن نداره و کسی نمیتونه اون رو پرینت کنه و ازش استفاده کنه. حتما با چنین مواردی زیاد مواجه شدید و مشکل بدلیل این هست که اون سایت اصلا خودش رو برای حالت Print آماده نکرده است.

بهینه سازی صفحات وب برای Print خیلی مهم است به دلیل اینکه ما قصد داریم که سایتمون در همه جا در دسترس باشه و با هر دستگاه و ابزاری قابلیت دسترسی به سایتمون امکان پذیر باشه. هنوز هم افراد زیادی هستند که قسمتی از سایتهای مختلف رو پرینت میگیرن و نگه میدارند. مثلا بخش پستها، صورت حسابها و اطلاعات تماس و ... بیشترین قسمتهایی هستند که کاربران اونا رو پرینت گرفته و ازشون استفاده میکنند. اگر شما میخواید سایتتون رو برای محیط Print آماده سازی کنید، این پست میتونه خیلی بهتون کمک کنه و با استفاده از ترفندهای CSS میتونین به اهداف مورد نظرتون برسید. در ادامه بصورت مرحله به مرحله، نحوه آماده سازی سایت برای Print رو بهتون آموزش میدیم.

1. روشهای قرار دادن استایل Print در سایت

بهترین روش برای قرار دادن استایلهای مربوط به پرینت اینه که کدهای اون رو درون دستور @media قرار بدین. همونطور که میدونین برای طراحی واکنشگرا یا Responsive نیز دستورهای خودمون رو درون همین دستور @media قرار میدیم ولی شروط و حالات اون با هم فرق میکنه. برای واکنشگرا کردن از screen و برای پرینت گرفتن از print استفاده میکنیم. انواع زیر برای media وجود دارند:

در این سری آموزشی ما به print نیاز داریم و کدهامون رو درون دستور print قرار میدیم. پس برای اینکار بصورت زیر عمل میکنیم:

همونطور که دیدید اندازه font-size رو برابر با 18 پیکسل و زمانی که در حالت print کردن قرار میگیرم، اندازه font-size رو برابر با 28 پیکسل قرار دادیم. با اینکار زمانی که ctrl + p رو میزنیم، متون با سایز 28 پیکسل نمایش داده میشن. همونطور که دیدید در روش بالا، کدهای مربوط به print رو مستقیما درون کدهای CSS قرار دادیم و با اینکار درخواست جداگانه ای ارسال نمیشه. شما میتونین کدهای مربوط به حالت print رو درون فایل جداگانه قرار بدین و اون رو بصورت تگ link درون کدهای HTML وارد کنید. بصورت زیر:

میبینید که درون ویژگی media مقدار print و آدرس فایل مربوط به print رو درون ویژگی href قرار دادیم. در جلسات بعد با ادامه این مبحث در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.