Kaptain Kitty
دسته ها :Html و Css
انتشار :۴ شهریور ۱۳۹۳
بازدید :1006 بار

تصاویر شناور

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

img { max-width: 100%; }

 این کد به مرورگر می گوید که هر تصویر باید تنها به اندازه ی پیکسل هایش بزرگ شود تا مطمئن شویم که تصویر هرگز کش نیامده یا پیکسله نمی شود. البته اگر آنها در یک container والد لانه بندی شده باشند که از مقدار پیکسل آنها کوچک تر باشد، تصویر باید جمع و کوچک شود. بنابراین برای مثال اگر تصویری با عرض ۸۰۰ پیکسل در یک container با عرض تنها ۶۰۰ پیکسل قرار بگیرد، تصویر باید به اندازه ی عرض ۶۰۰ پیکسل جمع شود. ارتفاع هم به صورت خودکار محاسبه شده و نسبت های اصلی حفظ خواهد شد.

مدیا کوئری

اگر آرایش دو ستونی را در نظر بگیریم و آن را برای نمایش در یک گوشی موبایل کوچک کنیم، این کار کمی چالش برانگیز است. معمولا گوشی های هوشمند در حالت پورتره به کار می روند؛ به این معنی که طول صفحه نمایش آنها بلندتر از عرض آنها است. این کار برای وب سایت هایی مفید است که به صورت عمودی scroll می شوند اما برای آرایش های گسترده با ستون های متعدد مناسب نیست. در اینجاست که مدیا کوئری به کمک می آید. مدیا کوئری ها یک تکنولوژی CSS است که اکنون چندین سال است که در مرورگر ها قرار داده شده است و کامپوننت اصلی طراحی ریسپانسیو هستند. مدیا کوئری ها به CSS این امکان را می دهند که تنها زمانی اعمال شود که شرایط خاصی وجود داشته باشد. برای مثال شما می توانید یک مدیا کوئری بنویسید که تنها زمانی CSS را اعمال کند که مرورگر عرض مشخصی داشته باشد. به عبارت دیگر هنگامی که یک طرح خیلی بزرگ یا خیلی کوچک باشد، می توان از مدیا کوئری برای مشخص نمودن عرض سایت و ارائه دادن CSS مناسبی که محتوای سایت را بر آن اساس مجددا تدوین می کند، استفاده کرد. به عنوان مثال، در مورد آرایش دو ستونی قبل، فرض میکنیم که می خواهیم ساید بار را بر اساس اندازه های صفحه نمایش گوشی موبایل، به قسمت بالا انتقال دهیم. در واقع روش بهتر این است که ابتدا استایل های موبایل را ایجاد کرده (رویکرد mobile first) و سپس از مدیا کوئری برای اعمال استایل ها برای سایزهای بزرگتر استفاده کنیم. مدیا کوئری مورد استفاده برای این کار به صورت زیر است:

@media screen and (min-width: 600px) { /* ...desktop styles here... */ }

مطمئنا آرایش هر grid شناوری شروع به شکستن کرده و دیگر ظاهر خوبی نخواهد داشت. برای مثال اگر آرایش مخصوص موبایل که ۱۰۰ درصد عرض مرورگر را می گیرد به اندازه ی صفحه نمایش دسکتاپی کشیده شود، این فضا خیلی خوب به کار برده نمی شود. نقطه ای که آرایش در آن دیگر خوب به نظر نمی رسد را breakpoint می نامند. سایت های ریسپانسیو breakpoint های خود را از طریق یک سری از مدیا کوئری ها تعریف می کنند. به طور کلی، کد ریسپانسیو به شکل زیر خواهد بود:

/* ...mobile styles here... */
@media screen and (min-width: 600px) { /* ...tablet styles here... */ }
@media screen and (min-width: 900px) { /* ...desktop styles here... */ }

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

روش Mobile First

حتی قبل از شروع تحول طراحی ریسپانسیو، ایده ی استفاده از یک روش mobile first به وجود آمد. Mobile first ایده ای طراحی اولیه ی یک وب سایت در سایز موبایل و سپس توسعه ی آن برای تبلت ها، دسکتاپ ها و غیره است. دلایل مختلفی برای این ایده وجود دارد:

– استفاده از مرورگرهای وب در موبایل ها رو به رشد سریع است و احتمالا جای مرورگرهای دسکتاپی را می گیرد (اگر تا کنون این اتفاق نیافتاده باشد).

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

– گوشی های موبایل معمولا قابلیت های بیشتری از هم طرازان دسکتاپی خود دارند که شامل صفحات لمسی، GPS، داده های شتاب سنجی و غیره

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

مطالب مرتبط

بهتر از من می دانید که دنیای برنامه نویسی هر روز با تغییرات جدی روبه رو است. هر روز که صفحات اینترنتی را باز می کنید می بینید که فریم ورک جدیدی وارد بازار شده که تا دیروز حتی اسمش را هم نشنیده بودید. با کمی تحقیق می بینید که اتفاقا بسیار کارامد هم هست. […]

نمی دانم برای شما هم پیش آمده است که روی پروژه ای مشغول کدنویسی باشید که در آن از افکت های سنگین ۳ بعدی و انیمیشنی بخواهید استفاده کنید یا خیر؟! اما من در چند وقت گذشته در یک پروژه ی وب اپلیکیشن مشغول کد نویسی بودم که هدفش انیمیشن سازی آنلاین در وب است. یک برنامه شبیه […]

یکی از بهترین و فوق العاده ترین پلاگین های جاوااسکرپیتی، پلاگینی است با عنوان ai2html، که کوتاه شده ی عبارت Adobe Illustrator to html می باشد. به طور خلاصه: می توانید فایل گرافیکی ساخته شده توسط نرم افزار Adobe Illustrator را به کدهای html تبدیل کنید. و این یکی از هیجان انگیزترین کارهای ممکن در وب است. […]

در این مقاله می خواهیم نگاهی داشته باشیم به مبحث JavaScript Templating یا همان مدیریت و ایجاد تمپلیت در وبسایت توسط جاوااسکریپت. در وحله ی اول بهتر است ببینیم تمپلیت های جاوااسکریپت چه معنایی دارند، چه زمانی باید از آنها استفاده کنیم و اینکه چگونه می توان آنها را پیاده سازی نمود. خوب است بدانید که موتورهای […]

نظراتتان را برایمان بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مطالب ما تو این شبکه های اجتماعی هم پخش میشه