آموزش طراحی سایت ریسپانسیو با CSS

طراحی سایت

..آموزش طراحی سایت ریسپانسیو با CSS..
آموزش طراحی سایت ریسپانسیو با CSS
طراحی سایت

آموزش طراحی سایت ریسپانسیو با CSS

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

ابزارها یا فریم‌ورک‌های متعددی برای طراحی سایت واکنش‌گرا موجود هستند که از آن جمله می‌توان به بوت‌استرپ، Foundation، Pure و … اشاره کرد. هرچند استفاده از این‌گونه فریم‌ورک‌های CSS کمک قابل توجهی به کاهش زمان و بهبود کیفیت طراحی سایت به حساب می‌آیند، ولی در کنار این ابزارها، لازم است تا با تکنیک‌های ریسپانسیو آشنایی داشته باشید تا بتوانید یک سایت با کیفیت که در تمامی محیط‌ها به درستی نمایش داده شود، طراحی نمایید.

پیش نیازهای طراحی سایت ریسپانسیو با CSS

پیش از شروع لازم است تا با مفهوم Viewport آشنایی داشته باشید. در صورت نیاز این نوشته را مطالعه کنید.

صفت media

درج فایل‌های CSS در فایل html با استفاده از تگ link به صورت زیر امکان‌پذیر است:

با اضافه کردن صفت media به این تگ می‌توانیم، بارگزاری فایل را به گوشی‌های موبایل محدود کنیم:

در قطعه کدبالا، بارگزاری فایل mobile.css را به صفحه‌های نمایشی که عرض آن‌ها حداکثر ۵۰۰ پیکسل است محدود کردیم.

علاوه بر max-width می‌توانیم از ویژگی‌های min-width و min-height و max-height هم استفاده کنیم.

کوئری سلکتور media

علاوه بر روش بالا که از فایل css جداگانه برای هر اندازه صفحه نمایش استفاده می‌کند، می‌توانیم کدهای مربوط به css موبایل را داخل فایل css اصلی هم درج کنیم. انجام این کار به شکل زیر است:

همان طور که مشاهده می‌کنید عرض div در حالت معمول ۵۰ درصد است و اگر صفحه نمایش ما کوچک باشد، div تمام عرض صفحه را اشغال می‌کند.

دقت کنید که چه در حالت صفت media و چه در حالت کوئری سلکتور media، لازم است تا اول کدهای css پیش‌فرض را درج کنید و بعد حالت خاص را قرار دهید چون media اولویت خاصی ندارد و اگر قبل از حالت پیش‌فرض بیاید اثرگذاری خود را از دست می‌دهد.

طراحی سایت واکنش گرا پیشرفته

نکات تخصصی زیادی برای طراحی سایت واکنش‌گرا وجود دارد. اگر می‌خواهید به طور تخصصی این موضوع را دنبال کنید، مطالب زیر برای شماست:

ادامه دارد…

117
27 مهر 1398
    ..نظرات..
    ..مقالات پربازدید..
    آموزش قرعه کشی در اینستاگرام
    طراحی سایت

    آموزش قرعه کشی در اینستاگرام

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

    13948
    24 فروردین 1398
    دلایل موفقیت دیجی کالا
    طراحی سایت

    دلایل موفقیت دیجی کالا

    یکی از موفق ترین استارت اپ های ایران در دهه ی اخیر سایت دیجی کالا بوده است . به طوری که به جرئت می توان گفت این سایت بزرگ‌ ترین خرده‌ فروشی اینترنتی خاورمیانه است .اقایان محمدی در سال 1384 تصمیم راه اندازی این وب سایت گرفتند و در سال 85 این برند با نام فعلی ” دیجی کالا ” پایه گذاری گردید .مدیران این پروژه با این هدف او...

    1967
    22 اردیبهشت 1398
    bit.ly چیست ؟
    طراحی سایت

    bit.ly چیست ؟

    بیتلی یا bitly یکی از شناخته‌شده‌ترین سرویس‌های کوتاه کننده لینک است. این سایت با نشانی https://bit.ly در سال ۲۰۰۸ تاسیس شد. یک کوتاه کننده‌ی لینک وظیفه دارد تا لینک‌های مورد نظر کاربران را به شکل کوتاه و قابل خواندن و نوشتن تبدیل کند. این سرویس در هر ماه حدود ۶۰۰ میلیون لینک کاربران را کوتاه می‌کند.علت استفاده از...

    1892
    27 آذر 1398