Kiya ارسال شده در January 16, 2023 اشتراک گذاری ارسال شده در January 16, 2023 با سلام خدمت شما دوستان. امروز قصد دارم نکاتی رو در رابطه با طراحی یک سایت واکنش گرا (Responsive) برای شما بیان کنم. امیدوارم با استفاده از این نکات سایت های خودتون رو بهبود ببخشید. ------------------------------------------------------------------------------------------------------------------------------- 1. استفاده از Bootstrap شاید برای شما هم پیش اومده باشه که زمان زیادی رو برای طراحی بخش کوچکی از سایتتون با `CSS` به کار بگیرید. همچنین جهت واکنش گرا بودن بخش ها و تگ های خاص باید مقداری زمان بیشتر در کد نویسی CSS تون بگذارید. یکی از راه حل های این موضوع که کار رو خیلی آسون تر میکنه استفاده از Bootstrap هستش. این زبان پیچیده نیست و کافیه فایل هاش رو دانلود کنید و به فایل کدتون وصل کنید و یا در قسمت <head> فایل ها رو مستقیم با لینک اصلی خود سایت Bootstrap لینک کنید. بعد از لینک کردن، کافیه یکم دانش دربارش کسب کنید و با استفاده از واژه هایی که مشخص کردن در قسمت اتربیوت Class تگتون اون ویژگی رو بهش بدین. برای مثال با استفاده از واژه btn btn-success میتوانید یک دکمه سبز رنگ (Success) برای خودتون ایجاد کنید. <button type="button" class="btn btn-success">Success button with green color</button> <button type="button" class="btn btn-danger">Danger button with red color</button> همونطور که میبینید کافیه اون رو در اتربیوت class قرار بدید. پس دیگه نیاز نیست زمان زیادی صرف طراحی بخش های مختلف کنید و با مشکل واکنش گرا نبودن مواجه بشید چون بسیاری از Bootstrap واکنش گرا هست. 2. تعریف کردن فونت ها و اندازه ها به صورت واکنش گرا خیلی از ما ها تقریبا تمام مقادیری که در وبسایتمون استفاده میکنیم بر حسب پیکسل (px) هست که به اصطلاح ایستا (static) هستن. بهتره این اندازه هارو با توجه به اندازه دستگاه تغییر بدیم که حالت واکنش گرا به خودشون بگیرن. مثال: @media (min-width: 600px) { body {font-size:1rem;} } @media (min-width:992px) { body {font-size:1.2rem;} } @media (min-width:1200px) { body {font-size:1.5rem;} } البته دقت کنید که برای این کار به اندازه دستگاه ها نیاز دارید که من در اختیارتون قرارش میدم: تلفن های همراه: 600px تبلت ها: 768px لپ تاپ ها: 992px کامپیوتر های بزرگ: 1200px 3. استفاده از CSS Grid برای تعریف CSS Grid میتونیم بگیم که یک سیستم شبکه دو بعدی هست که برای تنظیم چیدمان عناصر و بخش های سایت استفاده میشه. شامل سطر ها و ستون ها یا همون خط های افقی و عمودیه. CSS Grid یکی از رقایب Bootstrap به حساب میاد و حرفایی برای زدن داره. بنده خودم شخصاً به این سیستم علاقه ندارم و کار با Bootstrap رو ترجیح میدم. به همین خاطر دانشم در این بخش کمتر هست پس یک لینک براتون قرار میدم که در صورت تمایل میتونید مطالعه کنید: لینک 4. تست و بررسی واکنش گرا بودن بعد از اینکه ساخت سایتتون به اتمام رسید، نوبت به تست کردنش با دستگاه ها و مرورگر های مختلف میرسه. برای این کار میتونید از سایت های بررسی واکنش گرا بودن سایت استفاده کنید. بنده این سایت رو پیشنهاد میدم: لینک کافیه آدرس سایت رو وارد کنید و سایتتون رو با دستگاه های مختلف بررسی کنید. جمع بندی: برای تجربه بهتر کاربر ها و افزایش بازدید از سایتتون بهتره سایتتون رو به صورت Responsive طراحی کنید تا کاربران موبایل و سایر دستگاه ها بتونن به راحتی از خدمات شما استفاده کنن. منتظر نظر های زیبا و سوالات خوبتون هستم. لایک کردن مطلب یادتون نره. 2 1 نقل قول http://agsa.arsacia.ir/img/hla.png 𝐍𝐂 لینک به دیدگاه به اشتراک گذاری در سایت های دیگر تنظیمات بیشتر اشتراک گذاری...
M0rphine ارسال شده در January 17, 2023 اشتراک گذاری ارسال شده در January 17, 2023 بسیار عالی اگه میشه درمورد واحد های اندازه هم یه توضیح بده (px, remو ....) نقل قول http://agsa.arsacia.ir/players/bars/And.png لینک به دیدگاه به اشتراک گذاری در سایت های دیگر تنظیمات بیشتر اشتراک گذاری...
MoonD ارسال شده در January 17, 2023 اشتراک گذاری ارسال شده در January 17, 2023 خیلی مطلب مفیدی بود دمت گرم. نقل قول لینک به دیدگاه به اشتراک گذاری در سایت های دیگر تنظیمات بیشتر اشتراک گذاری...
M0rphine ارسال شده در January 17, 2023 اشتراک گذاری ارسال شده در January 17, 2023 در در ۱۴۰۱/۱۰/۲۶ در 12:41، Kiya گفته است: بعد از اینکه ساخت سایتتون به اتمام رسید، نوبت به تست کردنش با دستگاه ها و مرورگر های مختلف میرسه. برای این کار میتونید از سایت های بررسی واکنش گرا بودن سایت استفاده کنید. بنده این سایت رو پیشنهاد میدم: لینک فکر کنم که با استفاده از (Inspect Element) هم بشه این کار رو کرد نقل قول http://agsa.arsacia.ir/players/bars/And.png لینک به دیدگاه به اشتراک گذاری در سایت های دیگر تنظیمات بیشتر اشتراک گذاری...
Kiya ارسال شده در January 17, 2023 سازنده اشتراک گذاری ارسال شده در January 17, 2023 (ویرایش شده) در 7 ساعت قبل، M0rphine گفته است: بسیار عالی در 7 ساعت قبل، M0rphine گفته است: اگه میشه درمورد واحد های اندازه هم یه توضیح بده (px, remو ....) یک واحد دیفالت توی مرورگر های مختلف هست. برای مثال 1 rem تقریبا 16px هست. پیکسل که فکر کنم مشخصه، شما یک عکس رو با Paint باز کن و موس رو توی نقاط مختلف ببر میبینی که اون پایین مختصات نقطه رو بر حسب پیکسل بهت میگه. یا مثلا اندازه عکس ها بر حسب پیکسل هست. (1280*1280 یا 260*280) یک واحد دیگه که برای واکنش گرا بودن هم خوبه vh هست که مخفف Viewport Heigh هست. مثلا width: 50vh یعنی عرض اون بخش 50% از صفحه کاربر رو پوشش میده (هر دستگاهی که داشته باشه با توجه به عرضش، عرض اون بخش میشه 50%) در 6 ساعت قبل، MoonD گفته است: خیلی مطلب مفیدی بود دمت گرم در 5 ساعت قبل، M0rphine گفته است: فکر کنم که با استفاده از (Inspect Element) هم بشه این کار رو کرد حتی خود مرورگر رو میتونید از حالت تمام صفحه (full screen) خارج کنید و اندازه پنجره رو تغییر بدید. ولی یک مشکلی که هست اینه که یک سری هاشون خودشون واکنش گرا هستن و نمیزارن اون جلوه اصلی سایت رو ببینی. ویرایش شده January 17, 2023 توسط Kiya 1 نقل قول http://agsa.arsacia.ir/img/hla.png 𝐍𝐂 لینک به دیدگاه به اشتراک گذاری در سایت های دیگر تنظیمات بیشتر اشتراک گذاری...
Shifu ارسال شده در March 13, 2023 اشتراک گذاری ارسال شده در March 13, 2023 ?Bootstrap vs Flutter نقل قول لینک به دیدگاه به اشتراک گذاری در سایت های دیگر تنظیمات بیشتر اشتراک گذاری...
iliya ارسال شده در March 17, 2023 اشتراک گذاری ارسال شده در March 17, 2023 (ویرایش شده) مطلب مفید و کاربردی ممنون از شما ویرایش شده March 17, 2023 توسط Iliya نقل قول ??????? ?????? ???? لینک به دیدگاه به اشتراک گذاری در سایت های دیگر تنظیمات بیشتر اشتراک گذاری...
OddiN ارسال شده در March 18, 2023 اشتراک گذاری ارسال شده در March 18, 2023 در در ۱۴۰۱/۱۰/۲۶ در 12:41، Kiya گفته است: با سلام خدمت شما دوستان. امروز قصد دارم نکاتی رو در رابطه با طراحی یک سایت واکنش گرا (Responsive) برای شما بیان کنم. امیدوارم با استفاده از این نکات سایت های خودتون رو بهبود ببخشید. ------------------------------------------------------------------------------------------------------------------------------- 1. استفاده از Bootstrap شاید برای شما هم پیش اومده باشه که زمان زیادی رو برای طراحی بخش کوچکی از سایتتون با `CSS` به کار بگیرید. همچنین جهت واکنش گرا بودن بخش ها و تگ های خاص باید مقداری زمان بیشتر در کد نویسی CSS تون بگذارید. یکی از راه حل های این موضوع که کار رو خیلی آسون تر میکنه استفاده از Bootstrap هستش. این زبان پیچیده نیست و کافیه فایل هاش رو دانلود کنید و به فایل کدتون وصل کنید و یا در قسمت <head> فایل ها رو مستقیم با لینک اصلی خود سایت Bootstrap لینک کنید. بعد از لینک کردن، کافیه یکم دانش دربارش کسب کنید و با استفاده از واژه هایی که مشخص کردن در قسمت اتربیوت Class تگتون اون ویژگی رو بهش بدین. برای مثال با استفاده از واژه btn btn-success میتوانید یک دکمه سبز رنگ (Success) برای خودتون ایجاد کنید. <button type="button" class="btn btn-success">Success button with green color</button> <button type="button" class="btn btn-danger">Danger button with red color</button> همونطور که میبینید کافیه اون رو در اتربیوت class قرار بدید. پس دیگه نیاز نیست زمان زیادی صرف طراحی بخش های مختلف کنید و با مشکل واکنش گرا نبودن مواجه بشید چون بسیاری از Bootstrap واکنش گرا هست. 2. تعریف کردن فونت ها و اندازه ها به صورت واکنش گرا خیلی از ما ها تقریبا تمام مقادیری که در وبسایتمون استفاده میکنیم بر حسب پیکسل (px) هست که به اصطلاح ایستا (static) هستن. بهتره این اندازه هارو با توجه به اندازه دستگاه تغییر بدیم که حالت واکنش گرا به خودشون بگیرن. مثال: @media (min-width: 600px) { body {font-size:1rem;} } @media (min-width:992px) { body {font-size:1.2rem;} } @media (min-width:1200px) { body {font-size:1.5rem;} } البته دقت کنید که برای این کار به اندازه دستگاه ها نیاز دارید که من در اختیارتون قرارش میدم: تلفن های همراه: 600px تبلت ها: 768px لپ تاپ ها: 992px کامپیوتر های بزرگ: 1200px 3. استفاده از CSS Grid برای تعریف CSS Grid میتونیم بگیم که یک سیستم شبکه دو بعدی هست که برای تنظیم چیدمان عناصر و بخش های سایت استفاده میشه. شامل سطر ها و ستون ها یا همون خط های افقی و عمودیه. CSS Grid یکی از رقایب Bootstrap به حساب میاد و حرفایی برای زدن داره. بنده خودم شخصاً به این سیستم علاقه ندارم و کار با Bootstrap رو ترجیح میدم. به همین خاطر دانشم در این بخش کمتر هست پس یک لینک براتون قرار میدم که در صورت تمایل میتونید مطالعه کنید: لینک 4. تست و بررسی واکنش گرا بودن بعد از اینکه ساخت سایتتون به اتمام رسید، نوبت به تست کردنش با دستگاه ها و مرورگر های مختلف میرسه. برای این کار میتونید از سایت های بررسی واکنش گرا بودن سایت استفاده کنید. بنده این سایت رو پیشنهاد میدم: لینک کافیه آدرس سایت رو وارد کنید و سایتتون رو با دستگاه های مختلف بررسی کنید. جمع بندی: برای تجربه بهتر کاربر ها و افزایش بازدید از سایتتون بهتره سایتتون رو به صورت Responsive طراحی کنید تا کاربران موبایل و سایر دستگاه ها بتونن به راحتی از خدمات شما استفاده کنن. منتظر نظر های زیبا و سوالات خوبتون هستم. لایک کردن مطلب یادتون نره. عالی 1 نقل قول Nᴜᴍʙᴇʀ Oɴᴇ Fᴀᴍɪʟʏ لینک به دیدگاه به اشتراک گذاری در سایت های دیگر تنظیمات بیشتر اشتراک گذاری...
ارسال‌های توصیه شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید.
توجه: مطلب ارسالی شما پس از تایید مدیریت برای همه قابل رویت خواهد بود.