روش های ریسپانسیو کردن متن در طراحی سایت

س 

سایت واکنش گرا چیست؟

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

ریسپانسیو کردن

مشکلات ریسپانسیو کردن سایت:

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

واکنش گرا کردن سایت:

با پیشرفت های بسیاری در حوزه اینترنت و طراحی سایت،امروزه در CSS3  می توانید سایز نوشته های خود در سایت  و فونت آن را با توجه به ارتفاع یا عرض صفحه تعیین کنید.این ویژگی در بسیاری از مرورگرها با ورژن قدیمی تر قابلیت اجرا ندارد. در استفاده از این روش از واحد های vw و vh  برای تغییر فونت سایز و نوشته استفاده می کنیم.اما چه مرورگرهایی با چه ورژنی توانایی اجرا این ویژگی را دارند؟

سافاری ۷ به بالا،اینترنت اکسپلورر ۱۰ به بالا ،ios 6 به بالا ، اندروید ۴.۴ به بالا و فایرفاکس ۱۹ به بالا.

بنابراین اگر از هرکدام از مرورگرهای بالا استفاده می کنید می توانید برای ریسپانسیو کردن سایت خود با ما همراه شوید.

برای واکنش گرا کردن سایت خود تنها کافیست چند کار ساده انجام دهید:

۱)اگر می خواهید متن و فونت شما با توجه به عرض صفحه تغییر کند و واکنش گرا شود به جای واحد های px یا em  از واحد vw  استفاده کنید.

۲)اگر می خواهیدفونت نوشته های سایتتان بر اساس ارتفاع صفحه سایزدهی شود ، واحد های نوشته شده موجود را به واحد vh تغییر دهید.

عددی که وارد می کنید به عنوان درصد مبنا برای سایت تعریف می شود برای مثال اگر سایز یک متن را در سایز ۲۰vw  قرار دهید،متن سایز تنها ۲۰ درصد از عرض صفحه را می پوشاند.

از vh  و vw  به شکل های دیگری نیز می توانید استفاده کنید.برای مثال به حالت های زیر توجه کنید:

Vh1 : یک درصد از عرض صفحه

Vw1 : یک درصد از ارتفاع صفحه

۱vmin :از بین ۱vh  و ۱vw  هر کدام کوچکتر باشد را انتخاب می کند.

۱vmax : از بین ۱vh  و ۱vw  هر کدام بزرگتر باشد را انتخاب می کند.

برای فهم بهتر مساله به مثال زیر نیز توجه کنید:

نتیجه ریسپانسیو کردن را می توانید در اینجا ببینید.کافی است صفحه را کوچک و بزرگ کنید و تغییرات سایز متن را مشاهده کنید.

ریسپانسیو کردن متن

ریسپانسیو کردن متن ها به صورت دستی:

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

البته در این حالت کدهای زیر را نیز باید به مجموعه کدهای خود تگ کنید.

برای روشن شدن مساله،می توانید فونت سایت خود را به شکل زیر به هر میزان دلخواه خود تغییر دهید

از کارشناسان پرگاس انفورماتیک مشاوره تخصصی بگیرید

نرم افزار باشگاه مشتریان, طراحی سایت اختصاصی، نرم افزار مالی سپیدار

۵۶ ۲۸۴ ۲۸۴ (۰۲۱)