web-dev-qa-db-fra.com

Bootstrap 3 balise h1 sensible

Je crée un site et je veux qu'il soit réactif, donc j'utilise bootstrap 3. Cependant, la balise h1 sur la page de la politique de confidentialité et la page about sort du conteneur sur les petits appareils mobiles depuis le mot est trop volumineux. Existe-t-il un moyen de réduire la taille de la balise h1 pour qu'elle tienne dans le conteneur sur les petits appareils mobiles? Le site est muscadinewinerecipe.com si quelqu'un veut voir ce dont je parle. page et page de politique de confidentialité.

cssresponsive-designtwitter-bootstrap-3css-frameworks
11
user2503303

Vous pouvez utiliser ceci:

CSS:

h1{
     Word-wrap: break-Word;
     -webkit-hyphens: auto;
     -moz-hyphens: auto;
     -ms-hyphens: auto;
     -o-hyphens: auto;
     hyphens: auto;
}

DEMO: http://jsfiddle.net/ckq04r5q/

Ou si vous voulez plus de compatibilité avec le navigateur, vous pouvez utiliser votre h1 avec l'id ou la classe et réduire la taille de la police avec la requête multimédia sur <768px

CSS:

@media screen and (max-width: 768px) {
    h1{
        font-size:14px;
    }
}

Lorsque votre écran a une largeur inférieure à 768 pixels, la propriété fonctionne

23
Joffrey Maheo

J'ai eu le même problème, que j'ai résolu avec jQuery:

function resize() {
    var n = $("body").width() / 17 + "pt";
    $("h1").css('fontSize', n);
}
$(window).on("resize", resize);
$(document).ready(resize);

Le ratio peut être ajusté en remplaçant la valeur 17 et il peut être utilisé pour d'autres balises en modifiant le h1.

2
wirando

Pour Bootstrap 4, vous pouvez utiliser cette collection de mixins que j'ai créée pour moi-même - très pratique https://github.com/Omi0/boostrap-mixins

2
Timothy