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

Question

می خواهم فونت وب سایتی که درست کرده ام بر اساس رزولوشن صفحه نمایش بزرگ یا کوچک شود که خوانایی بالاتری داشته باشد. برای تشخیص رزولوشن از @media در CSS هام استفاده کرده ام ولی نمی خواهم برای هر رزولوشن یک فونت سایز بدهم چون خیلی زیاد می شود.

Comments

چه زبانی استفاده می کنید ؟

می تونی یک کلاس فونت تعریف کنی بعد خروجی رو در فونت سایز بزاری مهم نیست بگزریم فقط سوالتو واضحتر بگو سینا جان

---

از PHP استفاده می کنم.

Answer 1

من یک راه حل ساده دارم. ابتدا در فایل css خود هر جا که می خواهید به خصوصیت font-size مقدار بدهید از em استفاده کنید.

در css اصلی با استفاده از رول html درصد font-size در حالت پیش فرض را مشخص کنید:

html { font-size: 100%; }
.site-header { font-size: 1em;}
.site-content { font-size: 1.1em;}

حالا با رول @media برای هر رزولوشن فقط مشخص کنید که تمام مقادیر فونت سایت چقدر کوچک یا بزرگ شود:

@media (max-width: 300px) {
    html { font-size: 70%; }
}

@media (min-width: 500px) {
    html { font-size: 80%; }
}

@media (min-width: 700px) {
    html { font-size: 120%; }
}

@media (min-width: 1200px) {
    html { font-size: 200%; }
}

Answer 2

سلام اولین راه حل استفاده از علامت % است اینطور

 

نام ایدی یا کلاس{ font-size:100%; }

 این علامت با توجه به فضای که در صفحه دارد بصورت داینامیکی تغییر می کند.

ولی راه حل دوم اینکه با استفاده از جاوا اسکریپت و پی اچ پی که خودم به شخصه همچین کار نمی کنم چون اگر یک کاربر یا کاربرانی که به سایت میان کافیه که جاوا اسکریپت اونها غیر فعال که کاربر رو از محیط  زده می کنه که نظر کارهای رو باید با javaScript انجام داد به طور مشهود نباشد همیشه باید دور از دید کاربر و همیشه باید از تگ noscript بعد از script استفاده کرد خوب بریم به سراغ اینکه چطور اینکار رو انجام بدیم اول از همه نام id , class رو در تگ style قراردااده مثال :

  ""echo