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

506 بازدید
شنبه ۳۰ مرداد ۱۳۹۵
روش های ریسپانسیو کردن متن در طراحی سایتReviewed by جواد نبوی on Aug 20Rating: 4.0

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

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

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

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

در CSS3 قابلیتی وجود دارد که میتوانید سایز فونت را با توجه به عرض یا ارتفاع صفحه تعیین کنید. این قابلیت به دلیل جدید بودن، در ورژن های قدیمی اکثر مرورگر ها اجرا نمی شود. در این شیوه میتوانید با استفاده از واحد های vw و vh اندازه فونت را با توجه به سایز صفحه تعیین کنید. پشتیبانی مرورگر ها از این قابلیت را در زیر میبینید:

فایرفاکس ۱۹ به بالا، کروم ۳۴ به بالا، سافاری ۷ به بالا، اینترنت اکسپلورر ۱۰ به بالا، آندروید ۴٫۴ به بالا و iOS 6 به بالا.

به منظور واکنش گرا کردن متن های خود، کافیست به جای واحد px یا em از واحد های vw یا vh استفاده کنید.

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

به لیست زیر دقت کنید:

۱vw = یک درصد از عرض صفحه
۱vh = یک درصد از ارتفاع صفحه
۱vmin = از بین ۱vh و ۱vw هر کدام که کوچکتر باشد را انتخاب می کند
۱vmax = از بین ۱vh و ۱vw هر کدام که بزرگتر باشد را انتخاب می کند

به مثال زیر دقت کنید:

h1 {
 font-size: 5.9vw;
 }
 h2 {
 font-size: 3.0vh;
 }
 p {
 font-size: 2vmin;
 }

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

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

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

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

البته توجه داشته باشید که در این حالت باید کد زیر را هم به تگ <head> اضافه کنید.

<meta name="viewport" content="width=device-width, initial-scale=1">

خب حالا به صورت زیر فونت ها را در سایز های مختلف سایزدهی کنید:

@media(max-width:1100px){
 h1 {
 font-size: 20px;
 }
 }

@media(max-width:900px){
 h1 {
 font-size: 15px;
 }
 }

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

تبلیغات

نویسنده (مدیر سایت)

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

1 دیدگاه برای “روش های ریسپانسیو کردن متن در طراحی سایت”

  1. محمد گفت:

    مرسی خیلی مفید بود

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *