web-dev-qa-db-ja.com

Bootstrap 3レスポンシブh1タグ

bootstrap 3.を使用しているため、サイトを作成して応答性を高めたいと思っています。ただし、プライバシーポリシーページとバージョン情報ページのh1タグは、小さなモバイルデバイスのコンテナから出てきます。 Wordが大きすぎます。小さなモバイルデバイスのコンテナーに収まるようにh1タグのサイズを小さくする方法はありますか？誰かが私が話していることを見たい場合、サイトはmuscadinewinerecipe.comです。ページとプライバシーポリシーのページ。

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

あなたはこれを使うことができます：

CSS：

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

デモ： http://jsfiddle.net/ckq04r5q/

または、より多くのブラウザ互換性が必要な場合は、h1をidまたはクラスで兄弟にし、768ピクセル未満のメディアクエリでフォントサイズを小さくすることができます。

CSS：

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

画面の幅が768px未満になると、プロパティが実行されます

23
Joffrey Maheo

私はjQueryで解決した同じ問題を抱えていました：

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

比率は、値17を置き換えることで調整でき、h1を変更することで他のタグに使用できます。

2
wirando

Bootstrap 4の場合、私が自分用に作成したこのミックスインコレクションを使用できます。非常に便利なものです https://github.com/Omi0/boostrap-mixins

2
Timothy