ساخت سایت عکس العمل گرا یا RWD یک استراتژی طراحی طراحی سایت صفحه ها وب میباشد که مقصود آن سازگاری و نمایش مناسب صفحه های وب در دستگاه های
متفاوت همچون تلفن همراه، تبلت و دسکتاپ و مرورگرهای مختلف میباشد.طراحی ریسپانسیو یکیاز فاکتوهای مهم برای حصول درجه بهتر در موتورهای
جستجو همچون گوگل میباشد.درصورتیکه بازدیدکنندگان سایت از طریق موبایل تلفن همراه به سایت شما مراجعه نمایند و با ظاهر نامناسب مواجه شوند،
مسلماً تارنما شما را رخنه خواهند کرد.در این نوشتهیعلمی راهکارهای رایج برای صفحه ارایی ها ریسپانسیو مطالعه شده اند.
استفاده از متا تگ Viewport
متا تگ viewport دستورالعمل هایی را در زمینه ی روش در دست گرفتن بعدها برگه به مرورگر میدهد.وقتی که متا تگ viewport وجود ندارد
مرورگرهای گوشی، صفحه های وب را با تنظیمات پیش فرض دسکتاپ نمایش می دهند.
متا تگ Viewport
استفاده از CSS Media Queries
در حالتی که در طراحی ریسپانسیو صفحه های وب نو کارهستید، اولین و مهمترین قدم، یادگیری Media Query ها در css میباشد. Media Query ها قابلیت
استایل دهی به المان ها براساس عرض کاغذ نمایش را فراهم می سازند.یکی از استراتژی های رایج CSS این می باشد که استارت استایل های مربوط به
گوشی را بنویسید.
Media Query ها نصیب مهمی از طراحی وب برخورد گرا هستند که معمولاً برای grid layout ها، اندازه فونت، margin ها و
padding هایی که فی مابین صفحه های با اندازه های متفاوت و جهت های متعدد گوناگون میباشد، استفاده می گردد.
در مثال تحت عرض ستون برای دستگاه های کوچکتر 100٪ میباشد، ولی در دستگاه های با عرض بزرگتر از 600px پنجاه درصد هست.
استعمال از CSS Media Queries
استعمال از Flexbox
شاید برای شما این سوال پیش آمده باشد که Flexbox چه کاری انجام میدهد؟
فلکس باکس، ساده ترین روش برای ساخت مرکزیت عمودی با CSS و یا تشکیل داد طرح بندی شبکه ای یا grid layout هست.
فلکس باکس راهکاری مؤثر برای دکوراسیون، تراز کردن و توزیع محیط میان گزینه های یک container میباشد.
برای استفاده از Flexbox، استارت یک conatainer برای فلکس تعریف و تمجید می کنیم و استایل display:flex را به آن میدهیم.
در مثال تحت، از ترکیب فلکس باکس با media Query برای تشکیل داد یک طراحی ریسپانسیو استفاده شده میباشد.
flex-wrap: این ویژگی مشخص می کند که آیتم های جانور در فلکس باکس باید در یک ردیف و یا زیر هم قرار بگیرند.
flex-basis: اندازه آیتم های فلکس باکس را نماد میدهد.
justify-content: هنگامیکه گزینه های فلکس باکس از تمامی فضای جان دار به کار گیری نکنند؛ این ویژگی محل قرار گرفتن مورد ها در محور
افقی را معلوم می کند.
استعمال از Flexbox
تصویر اولیه خروجی کد بالا در گوشی گوشی و تصویر دوم خروجی این کد در دسکتاپ را نماد می دهد.
استعمال از Flexbox
پیمایش با Overflow Scroll
ویژگی overflow:scroll مشخص می کند که در صورت سرریز محتوا، یک نوار پیمایش یا اسکرول برای مشاهده بقیه محتوا اضافه شود.
از کاربردهای متداول استفاده از این تکنیک، می توان به منوها و جداول قابل پیمایش اشاره نمود.
overflow-x: معین می کند که با کناره های چپ و راست محتوا چه بایستی کرد. در صورت نیاز اسکرول افقی ساخت و ساز می کند.
overflow-y: مشخص و معلوم می کند که با کناره های بالا و زیر محتوا چه باید کرد. در صورت نیاز اسکرول عمودی ساخت می کند.
پیمایش با Overflow Scroll
تصاویر ریسپانسیو
با استعمال از ویژگی های مدرن تگ img خواهیم توانست تصاویر را برای طیف وسیعی از دستگاه ها و رزولوشن ها ریسپانسیو نماییم.
تصاویر ریسپانسیو
در مثال بالا
max-width: به تصویر اجازه میدهد تا اندازه خود را مبتنی بر عرض container تنظیم کند.
ادغام تگ های picture, source, img: با استفاده از ادغام این برچسب ها، در واقع تنها یک تصویر را ارائه میدهیم و بهترین و مناسب ترین
تصویر مبنی بر دستگاه کاربر را بارگذاری میکنیم.برچسب source دوم به یک پوشه PNG از همان تصویر برای مرورگرهایی که از
WebP هواخواهی نمی کنداشاره می نماید. WebP یک فرمت با قابلیت و امکان فشرده سازی پیشرفته برای تصاویر بر پایه ی وب میباشد.
source: برای ارجاع به یک تصویر WebP استعمال میگردد که قادر است به وسیله مرورگرهایی که از آن هواخواهی می کند، گزینه استفاده قرار بگیرد.
srcset: بسته به وضوح ورقه نمایش دستگاه خاص، به مرورگر اگاهی می دهد که کدام تصویر بایستی نمایش داده شود.
loading = lazy: پیاده سازی لود تنبل یا lazy loading را ایفا میدهد.
ساخت سایت عکس العمل گرا یا RWD یک استراتژی طراحی طراحی سایت صفحه ها وب میباشد که مقصود آن سازگاری و نمایش مناسب صفحه های وب در دستگاه های
متفاوت همچون تلفن همراه، تبلت و دسکتاپ و مرورگرهای مختلف میباشد.طراحی ریسپانسیو یکیاز فاکتوهای مهم برای حصول درجه بهتر در موتورهای
جستجو همچون گوگل میباشد.درصورتیکه بازدیدکنندگان سایت از طریق موبایل تلفن همراه به سایت شما مراجعه نمایند و با ظاهر نامناسب مواجه شوند،
مسلماً تارنما شما را رخنه خواهند کرد.در این نوشتهیعلمی راهکارهای رایج برای صفحه ارایی ها ریسپانسیو مطالعه شده اند.
استفاده از متا تگ Viewport
متا تگ viewport دستورالعمل هایی را در زمینه ی روش در دست گرفتن بعدها برگه به مرورگر میدهد.وقتی که متا تگ viewport وجود ندارد
مرورگرهای گوشی، صفحه های وب را با تنظیمات پیش فرض دسکتاپ نمایش می دهند.
متا تگ Viewport
استفاده از CSS Media Queries
در حالتی که در طراحی ریسپانسیو صفحه های وب نو کارهستید، اولین و مهمترین قدم، یادگیری Media Query ها در css میباشد. Media Query ها قابلیت
استایل دهی به المان ها براساس عرض کاغذ نمایش را فراهم می سازند.یکی از استراتژی های رایج CSS این می باشد که استارت استایل های مربوط به
گوشی را بنویسید.
Media Query ها نصیب مهمی از طراحی وب برخورد گرا هستند که معمولاً برای grid layout ها، اندازه فونت، margin ها و
padding هایی که فی مابین صفحه های با اندازه های متفاوت و جهت های متعدد گوناگون میباشد، استفاده می گردد.
در مثال تحت عرض ستون برای دستگاه های کوچکتر 100٪ میباشد، ولی در دستگاه های با عرض بزرگتر از 600px پنجاه درصد هست.
استعمال از CSS Media Queries
استعمال از Flexbox
شاید برای شما این سوال پیش آمده باشد که Flexbox چه کاری انجام میدهد؟
فلکس باکس، ساده ترین روش برای ساخت مرکزیت عمودی با CSS و یا تشکیل داد طرح بندی شبکه ای یا grid layout هست.
فلکس باکس راهکاری مؤثر برای دکوراسیون، تراز کردن و توزیع محیط میان گزینه های یک container میباشد.
برای استفاده از Flexbox، استارت یک conatainer برای فلکس تعریف و تمجید می کنیم و استایل display:flex را به آن میدهیم.
در مثال تحت، از ترکیب فلکس باکس با media Query برای تشکیل داد یک طراحی ریسپانسیو استفاده شده میباشد.
flex-wrap: این ویژگی مشخص می کند که آیتم های جانور در فلکس باکس باید در یک ردیف و یا زیر هم قرار بگیرند.
flex-basis: اندازه آیتم های فلکس باکس را نماد میدهد.
justify-content: هنگامیکه گزینه های فلکس باکس از تمامی فضای جان دار به کار گیری نکنند؛ این ویژگی محل قرار گرفتن مورد ها در محور
افقی را معلوم می کند.
استعمال از Flexbox
تصویر اولیه خروجی کد بالا در گوشی گوشی و تصویر دوم خروجی این کد در دسکتاپ را نماد می دهد.
استعمال از Flexbox
پیمایش با Overflow Scroll
ویژگی overflow:scroll مشخص می کند که در صورت سرریز محتوا، یک نوار پیمایش یا اسکرول برای مشاهده بقیه محتوا اضافه شود.
از کاربردهای متداول استفاده از این تکنیک، می توان به منوها و جداول قابل پیمایش اشاره نمود.
overflow-x: معین می کند که با کناره های چپ و راست محتوا چه بایستی کرد. در صورت نیاز اسکرول افقی ساخت و ساز می کند.
overflow-y: مشخص و معلوم می کند که با کناره های بالا و زیر محتوا چه باید کرد. در صورت نیاز اسکرول عمودی ساخت می کند.
پیمایش با Overflow Scroll
تصاویر ریسپانسیو
با استعمال از ویژگی های مدرن تگ img خواهیم توانست تصاویر را برای طیف وسیعی از دستگاه ها و رزولوشن ها ریسپانسیو نماییم.
تصاویر ریسپانسیو
در مثال بالا
max-width: به تصویر اجازه میدهد تا اندازه خود را مبتنی بر عرض container تنظیم کند.
ادغام تگ های picture, source, img: با استفاده از ادغام این برچسب ها، در واقع تنها یک تصویر را ارائه میدهیم و بهترین و مناسب ترین
تصویر مبنی بر دستگاه کاربر را بارگذاری میکنیم.برچسب source دوم به یک پوشه PNG از همان تصویر برای مرورگرهایی که از
WebP هواخواهی نمی کنداشاره می نماید. WebP یک فرمت با قابلیت و امکان فشرده سازی پیشرفته برای تصاویر بر پایه ی وب میباشد.
source: برای ارجاع به یک تصویر WebP استعمال میگردد که قادر است به وسیله مرورگرهایی که از آن هواخواهی می کند، گزینه استفاده قرار بگیرد.
srcset: بسته به وضوح ورقه نمایش دستگاه خاص، به مرورگر اگاهی می دهد که کدام تصویر بایستی نمایش داده شود.
loading = lazy: پیاده سازی لود تنبل یا lazy loading را ایفا میدهد.
آشنایی نیاز استفاده کننده و نیت کاوش