Bloglar için h tag boyutlandırması

/** h tag düzenlemesi **/

/* Blog yazıları için H etiketleri - Desktop */
.single-post h1,
.post-content h1,
article h1 {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 1.2rem;
}

.single-post h2,
.post-content h2,
article h2 {
    font-size: 2.5rem;
    line-height: 1.3;
    margin-bottom: 1rem;
}

.single-post h3,
.post-content h3,
article h3 {
    font-size: 2.25rem;
    line-height: 1.4;
    margin-bottom: 0.9rem;
}

.single-post h4,
.post-content h4,
article h4 {
    font-size: 2rem;
    line-height: 1.4;
    margin-bottom: 0.8rem;
}

.single-post h5,
.post-content h5,
article h5 {
    font-size: 1.75rem;
    line-height: 1.5;
    margin-bottom: 0.7rem;
}

.single-post h6,
.post-content h6,
article h6 {
    font-size: 1.6rem;
    line-height: 1.5;
    margin-bottom: 0.6rem;
}

.single-post p,
.post-content p,
article p {
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 1.2rem;
}

/* MOBİL AYARLAMALARI - 768px ve altı */
@media (max-width: 768px) {
    .single-post h1,
    .post-content h1,
    article h1 {
        font-size: 2.2rem;      /* 35.2px */
        line-height: 1.3;
        margin-bottom: 1rem;
    }

    .single-post h2,
    .post-content h2,
    article h2 {
        font-size: 1.9rem;      /* 30.4px */
        line-height: 1.4;
        margin-bottom: 0.9rem;
    }

    .single-post h3,
    .post-content h3,
    article h3 {
        font-size: 1.7rem;      /* 27.2px */
        line-height: 1.4;
        margin-bottom: 0.8rem;
    }

    .single-post h4,
    .post-content h4,
    article h4 {
        font-size: 1.5rem;      /* 24px */
        line-height: 1.5;
        margin-bottom: 0.7rem;
    }

    .single-post h5,
    .post-content h5,
    article h5 {
        font-size: 1.35rem;     /* 21.6px */
        line-height: 1.5;
        margin-bottom: 0.6rem;
    }

    .single-post h6,
    .post-content h6,
    article h6 {
        font-size: 1.25rem;     /* 20px */
        line-height: 1.5;
        margin-bottom: 0.5rem;
    }

    .single-post p,
    .post-content p,
    article p {
        font-size: 1.1rem;      /* 17.6px - Mobilde daha küçük */
        line-height: 1.7;       /* Mobilde daha gevşek satır aralığı */
        margin-bottom: 1rem;
    }
}

/* KÜÇÜK MOBİL - 480px ve altı */
@media (max-width: 480px) {
    .single-post h1,
    .post-content h1,
    article h1 {
        font-size: 1.9rem;      /* 30.4px */
        margin-bottom: 0.8rem;
    }

    .single-post h2,
    .post-content h2,
    article h2 {
        font-size: 1.6rem;      /* 25.6px */
        margin-bottom: 0.7rem;
    }

    .single-post h3,
    .post-content h3,
    article h3 {
        font-size: 1.4rem;      /* 22.4px */
        margin-bottom: 0.6rem;
    }

    .single-post p,
    .post-content p,
    article p {
        font-size: 1rem;        /* 16px - Standart boyut */
        line-height: 1.8;       /* Daha rahat okuma */
    }
}


/** h tag düzenlemesi son **/

Bu makaleyi yararlı buldunuz mu?