急いでいます！

メディアクエリで文字サイズをウインドウサイズに合わせて無段可変

締切済

質問者：momo_monom
質問日時：2016/07/15 14:03
回答数：2件

メディアクエリでウインドウサイズに合わせて、細かく文字サイズの指定をしているんですが、ウインドウサイズに合わせて、無段階で文字サイズを変更するような仕組みを考えています。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; } }

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： ORUKA1951
回答日時：2016/07/15 18:29

書き方は

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">

</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>