29
تشکر

آموزش طراحی ریسپانسیو – فونت ها

آموزش طراحی ریسپانسیو – قدم اول

آموزش طراحی ریسپانسیو – قدم اول

این مطلب در دسته بندی مطالب طراحی ریسپانسیو است. طراحی ریسپانسیو را در اینجا دنبال کنید.

برای درک طراحی ریسپانسیو ابتدا مطالب طراحی ریسپانسیو (Responsive) چیست؟ و آموزش طراحی ریسپانسیو را بخوانید.

در قدم اول ما در طراحی ریسپانسیو باید اندازه تمام فونت هایمان را از واحد px به واحد em تبدیل کنیم.

در واقع em بر اساس میزان بزرگی یا کوچک بودن والد, اندازه خود را نیز تغییر میدهد و این همان چیزی است که ما آن را لازم داریم. زیرا میخواهیم در دستگاه های کوچکتر مانند موبایل اندازه فونت ها به صورت خودکار تنظیم شود.

خب کد زیر را در نظر بگیرید.

<!DOCTYPE html>
<html>
<head>
    <title>طراحی ریسپانسیو</title>
    <style>
        h1{
            font-size:24px;
        }
        h1 a{
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h1>My First Responsive Design with <a href="http://aparnet.ir">Aparnet</a></h1>
</body>
</html>

در کد بالا اندازه h1 برابر با 24px است. خوب em آن چقدر میشود؟

شما میتوانید مقدارهای خودتان را به صورت تصادفی در em بنویسید و آن را چک بکنید. اما راه مطمئن تری نیز وجود دارد.

Target / Context = Result

مقدار تارگت شما 24px است. و مقدار Context را از مقدار پیشفرض مروگر برای h1 بدست می آوریم که 16px است. حالا 24 تقسیم بر 16 برابر با 1.5 میشود که آن را به واحد em مینویسیم. پس کد بالا به صورت زیر میشود.

<!DOCTYPE html>
<html>
<head>
    <title>طراحی ریسپانسیو</title>
    <style>
        h1{
            font-size:1.5em;
        }
        h1 a{
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h1>My First Responsive Design with <a href="http://aparnet.ir">Aparnet</a></h1>
</body>
</html>

خب هنوز مقدار h1 a را به صورت em ننوشتیم. همانطور که گفتیم em بر اساس والد خود اندازه خود را تنظیم میکند. بنابراین اگر ما مقدار h1 a را برابر 1em در نظر بگیریم هم اندازه خود h1 میشود و اگر 2em بگیریم دو برابر اندازه h1 میشود. بنابراین 1em میگیریم. پس:

<!DOCTYPE html>
<html>
<head>
    <title>طراحی ریسپانسیو</title>
    <style>
        h1{
            font-size:1.5em;
        }
        h1 a{
            font-size: 1em;
        }
    </style>
</head>
<body>
    <h1>My First Responsive Design with <a href="http://aparnet.ir">Aparnet</a></h1>
</body>
</html>

  • Sir1 می‌گه:

    نشد !
    ینی در اندازه کوچیک همونقدر میمونه و کوچیک نمیشه 1em نوشتم !

  • mobtaker82 می‌گه:

    بایت مطالب مفیدتون تشکر میکنم. من از کاربری جدید هستم.
    عددی که گفتید مثلا برای h1 = ١۶ است این عدد ثابت است یا اینکه برای هر المانی تغیییر میکند؟
    در اینصورت آیا مرجعی هست که این اعداد را دید؟

  • fateme می‌گه:

    خیلی ممنون
    خیلی مفید بود.
    چند روزی بود درگیر فونت ها بودم تا حالت responsive سایتم رو به هم نریزه
    موفق باشید

  • آروین می‌گه:

    سلام
    واقعا سایتتون عالیه.
    ببخشید که فقط یک نظر گذاشتم اما من کاربر دایمی سایتتونم.

  • Ali Amini می‌گه:

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


  • نظرات این مطلب بسته است.