طراحی وب عکس العمل گرا یا 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 را اجرا میدهد.
متعدد همچون تلفن همراه، تبلت و دسکتاپ و مرورگرهای مختلف می باشد.طراحی ریسپانسیو یکی از فاکتوهای اصلی برای حصول درجه بهتر در موتورهای
جستجو همچون گوگل میباشد.درصورتیکه بازدیدکنندگان وب سایت از طریق موبایل موبایل به وبسایت شما مراجعه نمایند و با ظاهر نامناسب مواجه شوند،
مطلقاً تارنما شما را رخنه خواهند کرد.در این نوشته ی علمی راهکارهای رایج برای طراحی صفحه ها ریسپانسیو رسیدگی شده اند.
استعمال از متا تگ 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 را اجرا میدهد.
- پنجشنبه ۰۷ فروردین ۰۴ ۱۲:۱۷
- ۲۰ بازديد
- ۰ نظر