طراحی واکنش گرا در CSS

Responsive Web Design With CSS

0 517

طراحی واکنش گرا (Responsive) چیست؟

طراحی واکنش گرا صفحات وب شما را در تمام دستگاه ها (موبایل، لپتاپ، تبلت و …) به زیبایی نشان می دهد. شاید ابتدا پیچیده به نظر بیاید اما برای طراحی واکنش گرا تنها به HTML و CSS نیاز داریم! بنابراین نیازی به برنامه ی خاص یا زبان هایی مانند جاوا اسکریپت نیست. در واقع در طراحی واکنش گرا نباید اطلاعات را برای جا شدن در صفحات کوچک حذف کرد، بلکه باید شکل آن ها را تغییر داد تا بتوانند در صفحه جا شوند.

یک مثال از طراحی واکنش گرا را در کد زیر می بینید:

مشاهده ی خروجی در JSBin

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

برای کار با طراحی ریسپانسیو با CSS و توضیح آن باید با مفاهیم خاصی آشنا بود که در طول دوره آن ها را توضیح می دهیم. بهتر است با viewport شروع کنیم.

viewport چیست؟

viewport قسمتی از صفحه است که کاربر آن را می بیند. ممکن است با خودتان بگویید مگر کاربر تمام صفحه را نمیبیند؟ منظور ما صفحه ی وب است نه صفحه ی نمایشگر! به تصویر زیر نگاه کنید:

تفاوت viewport در دو دستگاه مختلف با اندازه ی صفحه ی مختلف
تفاوت viewport در دو دستگاه مختلف با اندازه ی صفحه ی مختلف

همانطور که می بینید هر دستگاه بر اساس سایز صفحه ی خودش، قسمتی از صفحه ی وب را می بیند. به طور مثال دستگاه سمت راست قسمتی از تصویر منظره در صفحه ی ما را نمی بیند. بنابراین به قسمتی که دیده می شود viewport می گوییم.

قبل از تولید گوشی های همراه صفحات وب تنها برای کامپیوترها ساخته می شدند و به همین دلیل معمولا سایز ثابتی داشتند اما با معرفی گوشی های هوشمند و تبلت ها دیگر این صفحات بزرگ و ثابت برای نمایش محتوا کافی نبودند، چرا که بسیار بزرگ تر از اندازه ی صفحه ی گوشی ها بودند.

خوشبختانه در HTML5 توسعه دهندگان اجازه ی کنترل viewport را دارند. برای این کار باید با یکی از تگ های <meta> کار کنیم:

این تگ متا به شما اجازه می دهد که نحوه ی بزرگنمایی و ابعاد صفحه را کنترل کنید. قسمت width=device-width یعنی عرض صفحه مطابق با عرض نمایشگر کاربر باشد (یعنی بر اساس سایز صفحه تغییر کند). قسمت initial-scale=1.0 نیز برای تعیین بزرگنمایی اولیه است؛ اگر این مقدار بیشتر از 1 باشد، پس از آنکه مرورگر صفحه ی وب را بارگذاری کرد به همان نسبت در صفحه زوم می کند.

در قسمت زیر دو مثال آورده ایم و در یکی از آن ها تگ meta را قرار داده ایم. تفاوت آن ها را ببینید:

مثال اول – بدون تگ viewport

مشاهده ی خروجی در JSBin

مثال دوم – با تگ viewport

مشاهده ی خروجی در JSBin

برای درک تفاوت بین این دو مثال باید به صفحه ی خروجی این دو کد رفته و با کوچک و بزرگ کردن صفحه متوجه تغییر تصاویر بشوید.

برخی از قوانین طراحی واکنش گرا

تمام کاربران (چه با گوشی و چه با کامپیوتر یا تبلت) برای نمایش محتوای وب از اسکرول عمودی استفاده می کنند اما نباید اجازه دهید که صفحات شما اسکرول افقی بگیرند! اگر کاربران شما برای دیدن محتوای صفحاتتان مجبور به اسکرول افقی یا زوم کردن باشند طراحی سایت شما اصلا قابل قبول نیست و باید سریعا آن را تغییر دهید. این اولین قانون طراحی واکنش گرا است!

قوانین دیگر در طراحی واکنش گرا به طور خلاصه عبارت اند از:

  • از عناصر بزرگ با عرض ثابت استفاده نکنید: به طور مثال اگر تصویری بزرگ تر از viewport باشد باعث می شود صفحه ی ما اسکرول افقی بخورد بنابراین همیشه عرض عناصر خود را تنظیم کنید.
  • عناصر را وابسته به Viewport نکنید: وابستگی عناصر به viewport برای نمایش صحیح کار بسیار اشتباهی است. از آن جا که سایز صفحات و تعداد پیکسل های آن ها بین دستگاه های مختلف اختلاف شدیدی دارد نباید نمایش صحیح عناصر خود را وابسته به Viewport خاصی کنیم، بلکه باید هر عنصری برای هر صفحه ای نمایش داده شود.
  • از Media Query ها برای ایجاد استایل های متفاوت در عرض های متفاوت استفاده کنید: قبلا در مورد Media Query ها صحبت کرده ایم. اگر در این مورد اطلاعی ندارید به قسمت قبل مراجعه کنید.
  • به جای استفاده از واحدهای ثابت از واحدهای نسبی استفاده کنید: واحد های نسبی مانند درصد (%) به انعطاف پذیری صفحات شما کمک می کنند، مخصوصا زمانی که مربوط به موقعیت دهی (positioning) باشند.

امیدوارم به اندازه ی کافی با مفاهیم اولیه ی طراحی ریسپانسیو با css آشنا شده باشید. در قمست بعد به سراغ grid ها می رویم.

ترتیبی که روکسو برای یادگیری مطالب سری CSS پیشرفته به شما توصیه می‌کند:

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

film izle | eskisehir escort | modanisa | mersin escort | www.ieski.com | eskort adana | www.izmir-eskort.org | kabak koyu | hd tv izle