آموزش طراحی سایت ریسپانسیو با 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 اولویت خاصی ندارد و اگر قبل از حالت پیش‌فرض بیاید اثرگذاری خود را از دست می‌دهد.

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

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

ادامه دارد…

32
27 مهر 1398
..نظرات..
..مقالات پربازدید..
طراحی سایت

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

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

6372
24 فروردین 1398
برنامه نویسی

ویژگی های جدید لاراول 5.8

تغییرات لاراول 5.8 LARAVEL ورژن بعدی فریم ورک لاراول با نسخه ۵.۸ در ماه فوریه سال ۲۰۱۹ منتشر میشه. در حال حاظر تنها مواردی که قطعی شده پشتیبانی لاراول ۵.۸ از کتابخانه carbon نسخه ۲ می باشد. و قابلیت امکان سوییچ بین هر دو نسخه یک و دو carbon مورد دیگر استفاده laravel 5.8 از vlucas/phpdotenv ورژن 3 برای فایل .env میباشد که اجازه استف...

608
08 اسفند 1397
برنامه نویسی

آموزش کار با افزونه دکان (چند فروشندگی)

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

537
04 دی 1397