メディアクエリでウインドウサイズに合わせて、細かく文字サイズの指定をしているんですが、ウインドウサイズに合わせて、無段階で文字サイズを変更するような仕組みを考えています。Javascriptなどで実現可能なのでしょうか?
@media screen and (min-width: 1201px) and (max-width: 1280px) { body { font-size: 11px; } }
@media screen and (min-width: 1281px) and (max-width: 1380px) { body { font-size: 12px; } }
@media screen and (min-width: 1381px) and (max-width: 1450px) { body { font-size: 13px; } }
@media screen and (min-width: 1451px) and (max-width: 1500px) { body { font-size: 13.2px; } }
@media screen and (min-width: 1501px) and (max-width: 1550px) { body { font-size: 13.5px; } }
@media screen and (min-width: 1551px) and (max-width: 1600px) { body { font-size: 14px; } }
@media screen and (min-width: 1601px) and (max-width: 1620px) { body { font-size: 14.3px; } }
@media screen and (min-width: 1621px) and (max-width: 1640px) { body { font-size: 14.5px; } }
@media screen and (min-width: 1641px) and (max-width: 1650px) { body { font-size: 15px; } }
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
書き方は
body { font-size: 11px; }
@media (min-width: 400px){ body { font-size: 10px; } }
@media (min-width: 480px){ body { font-size: 12px; } }/* ウィンド幅1.2倍 */
@media (min-width: 580px){ body { font-size: 14.4px; } }
@media (min-width: 550px){ body { font-size: 17.2px; } }
@media (min-width: 590px){ body { font-size: 20.8px} }
@media (min-width: 830px){ body { font-size: 25px; } }
@media (min-width: 996px){ body { font-size: 30px; } }
@media (min-width: 1120px){ body { font-size: 36px; } }
@media (min-width: 1430px){ body { font-size: 43x; } }
でよい。理解せず受け売りするからそうなる。(^^)
ただ、これは通常は行いません。というのは、ウェブはユーザー優先だからです。
ユーザーは基本的には、自分が見やすいフォントサイズを指定しています。そして字が小さいときは、Ctrl++で拡大してみてますし、アドオンで画像は除いてフォントだけ拡大するFont Size( https://addons.mozilla.org/ja/firefox/addon/font … )とかしています。
★ ユーザーが小さくて読みにくいときは、Ctrl++、そうでないときはCtrl+-で文字サイズを変えていることを忘れてはなりません。
私もこの回答フォームに入力するときは、すこし大きくしている。
逆に言うとフォントサイズでデザインが変わるサイトは作ってはならない。
なお、ipadやスマホだと、本来のpx(0.26mm)ではありません。
CSS2.1以降のpx________
デバイスからの腕の長さ(71cm)離れた距離において、96dpiのピクセル密度におけるデバイス上の1ピクセルとの視角として定められています。実際の画素数とは関係ない。視角は約0.0213度で、1pxは約0.26mm(1/96インチ)
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで
でしたが、
スマホの場合は、320px幅のディスプレイでも、960px・・実質1/3のサイズに縮んで表示されます。また、拡大してみるときはスマホを横にします。
デザイン上、どうしても合わせたい場合は、ボックスサイズも併せて指定して、段階的にするほうが良いでしょう。
body{font-size:16px;}
header,section,footer{max-width:1000px;margin:0 auto;}
section{position:relative;}
section>*{margin:0 210px;}
section>nav,section aside{position:absolute;width:200px;height:100%;top:0;margin:0;}
section>nav{left:0;}
section>aside{right:0;}
@media (max-width: 840px){
body{font-size:14px;}
section>*{margin:0 0 0 210px;}
section aside{position:static;width:auto;margin:0 0 0 210px;height:auto;}
}
@media (max-width: 640px){
body{font-size:12px;}
section>*{margin:0;}
section>nav{position:static;width:auto;margin:0;height:auto;}
}
とか・・
簡単なサンプル
★タブは_に置換してあるので戻してください。
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
のDATA(右上)で検証済みHTML5+CSS2.1
<!doctype html>
<html>
<head>
_<meta charset="utf-8">
_<title>サンプル</title>
_<meta name="description" content="">
_<meta name="author" content="ORUKA">
_<link rel="stylesheet" href="css/style.css">
<style media="screen">
<!--
h1,h2,h3,p,ul{margin:0;line-height:1.6em;}
header,footer{background-color:aqua;}
section{background-color:silver;}
section nav{background-color:lime;}
section aside{background-color:orange;}
body{font-size:16px;}
header,section,footer{max-width:1000px;margin:0 auto;}
section{position:relative;min-height:300px;}
section>*{margin:0 210px;}
section>nav,section aside{position:absolute;width:200px;height:100%;top:0;margin:0;}
section>nav{left:0;}
section>aside{right:0;}
@media (max-width: 900px){ body { font-size: 14.4px; } }
@media (max-width: 810px){ body { font-size: 13px; } }
@media (max-width: 810px){
_body{font-size:14px;}
_section>*{margin:0 0 0 210px;}
_section aside{position:static;width:auto;margin:0 0 0 210px;height:auto;}
_@media (max-width: 660px){ body { font-size: 10.5px; } }
}
@media (max-width: 590px){
_body{font-size:10px;}
_section>*{margin:0;}
_section>nav{position:static;width:auto;margin:0;height:auto;}
_section>aside{margin:0;}
}
-->
</style>
</head>
<body>
_<header>
__<h1 id="title">Your title</h1>
__<nav>
___<ul>
____<li><a href="#">Some</a></li>
____<li><a href="#">navigation</a></li>
____<li><a href="#">links</a></li>
___</ul>
__</nav>
_</header>
_<section>
__<h2>A smaller heading</h2>
__<p>
___デバイスからの腕の長さ(71cm)離れた距離において、96dpiのピクセル密度におけるデバイス上の1ピクセルとの視角として定められています。実際の画素数とは関係ない。視角は約0.0213度で、1pxは約0.26mm(1/96インチ)
__</p>
__<aside>
___<h3>Something aside</h3>
__</aside>
__<nav>
___<h3>ナビゲーション(目次)</h3>
___<ul>
____<li><a href="#">Some</a></li>
____<li><a href="#">navigation</a></li>
____<li><a href="#">links</a></li>
___</ul>
__</nav>
_</section>
_<footer>
__<h3>A nice footer</h3>
__<p>本文と直接関係ない(asideな)記事</p>
_</footer>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
li 黒丸含んで移動する方法
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
form input テキストを上下中央...
-
中点「・」の改行について
-
定義リストに下線をつけたいと...
-
画像イメージの上下左右、欲し...
-
余分な縦スクロールバーが出て...
-
CSSでボックスのheightが0になる
-
HTMLで一部だけスクロールする...
-
CSSの記述でのクラスの定義で
-
<div>と<div>の間の10px程の...
-
横並びリスト ブラウザ縮小 カ...
-
CSS、width100%でもできる余白
-
divで囲まれたpaddingの指定を...
-
HTMLのiframeの入れ子について
-
【CSS】ヘッダーの高さが不明の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
form input テキストを上下中央...
-
css初心者 フレックスボックス...
-
表示倍率を変えるとレイアウト...
-
HTMLで文字が重なって表示されます
-
CSSで背景画像を一番下にもって...
-
W3Cのソースコードの検証サービ...
-
CSS、width100%でもできる余白
-
CSSがなぜかfont-sizeだけ効か...
-
CSSでボックスのheightが0になる
-
Media Queries 4 で 非推奨とな...
-
スクロールボックスを中央に配...
-
【CSS】ヘッダーの高さが不明の...
-
CSS(0の単位)について
-
【HTML&CSS】フッター下部の余...
-
<div>と<div>の間の10px程の...
-
CSSで指定した背景画像にリンク...
-
footer を横幅いっぱいに広げる...
おすすめ情報