قبلا در مورد رسپانسیو قالب سایت باهاتون کاملا بحث شد و مطالبی در این مورد در آرشیو سایت وجود داره امروز میخوایم روش جدید را بهتون یاد بدیم با عنوان رسپانسیو کردن متن در مطالب
با شما هستیم با آموزش رسپانسیو متن روشی که برای واکنشگرا کردن متون وجود دارد و به طور معمول توسط طراحان استفاده می شود، ریسپانسیو کردن به صورت دستی است. به این صورت که از طریق دستور 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;
}
}
رسپانسیو کردن قالب هم یک روش دیگر نیز وجود دارد : به منظور واکنش گرا کردن متن های خود، کافیست به جای واحد 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;
}
باید در ادامه اضافه کنیم که رسپانسیو کردن متن میتونه در بهبود سئوی سایت شما کمک کنه.در CSS3 قابلیتی وجود دارد که میتوانید سایز فونت را با توجه به عرض یا ارتفاع صفحه تعیین کنید. این قابلیت به دلیل جدید بودن، در ورژن های قدیمی اکثر مرورگر ها اجرا نمی شودهماهنگ کردن یک قالب با همه دستگاه ها و رزولوشن ها کار سختی است. اما در این بین میتوان گفت سخت ترین کار، ریسپانسیو کردن متن ها است. شما میتوانید سایز عناصر دیگر را با واحد درصد بیان کنید اما برای سایز متن، امکان استفاده از درصد وجود ندارد. بنابراین باید از روش های دیگری استفاده کرد.امیدوارم این آموزش به درد شما خورده باشه و بتونید در ادامه قالبی بهتر و سایتی بهتر را نیز راه اندازی نمایید.
بهینه سازی متن با css3 رو هم آموزش بدین مرسی.
در ضمن کد ها در مرورگر من بهم ریخته است. و تصویر هم حذف شده. حیفه این آموزش با این بیان کاربردی غیر قابل استفاده بشه. آپدیت کنیییید. مرسی