0TweetPocketレスポンシブサイトを作る時に一番面倒なのが、ビューポイントに合わせてメディアクエリを使い、細かく指定することだと思います。その指定の中で今回は、フォントサイズをレスポンシブに対応してみます。フォントサイズの指定で代表的な方法はvwを使うことですが、これだけだと正直使いづらいと感じています。使用率はどんなものでしょうか?スマホだけに使ったり部分的に使うのはたまに見ますが...そこで、calcと組み合わせて、vwを使いやすくしようと思います。記述するCSSの中身htmlに対して下記のように指定します。※まだ、@mixinは作ってないので、作り次第更新します。1920pxの間で、フォントサイズが、14px~18pxとサイズが変化します。フォント18pxそれぞれの数字を変える事で、自由に調整出来ます。最小画面幅から最大画面幅の間で、最小フォントサイズより何px大きくなるかを指定します。先程のサンプルだと最小フォントサイズが14pxで、フォントサイズの変化量が4なので、指定した画面幅の間で、14pxから18px変化します。・最小画面幅フォントサイズを変化させたい最小のウィンドウサイズを指定します。基本、最小はスマホだと思うので、320px安定だと思います。・最大画面幅フォントサイズを変化させたい最大のウィンドウサイズを指定します。最小画面幅」を記述します。1600」を指定しています。※この辺も後日の@mixinで自動化対象ですね^^;・最小フォントサイズそのままの意味で、最小画面幅の時のフォントサイズを指定します。※あくまで、最小画面幅~最大画面幅の間でのフォントサイズ指定なので、これに収まらない画面幅の場合は、変化量よりも大きくなったり小さくなってりします。実際に要素に指定する場合は、remもしくはemで指定します。20px);}上記の場合は下記のように変化します。18pxあえて1remを使っていますが、記述無しの場合と同じですね。36px2remは基準の2倍なのでこうなります。50pxもちろん個別に指定する事も可能です。ちなみにこのcalc(...)の部分は、font-sizeだけでは無く、widthなどにも使用することが出来ます。動きサンプルそれぞれの動きサンプルを掲載します。ウィンドウを縮めたり広げたりしてみてください。4番目は参考として、vwのみ指定の場合です。※htmlも記載してますが、styleはインラインで失礼します。※サイトの構成上、ページ可変が見づらいかもしれませんのでごめんなさい。PC/SP共に、タイトルはテキストの1.5倍というようなデザインの場合、本当に1行指定して上げるだけで済むので便利です。全体的に途中から固定したい場合も、基準のhtml要素にだけメディアクエリをつければOKです。PC/SPでフォントの比率がバラバラの場合は、1行でとは行かないですが、個別に指定も出来るので大丈夫かなと...cssでも条件分岐出来るようになればいろいろ楽になるのになーと考えてしまいました(汗では。コメントをキャンセルメールアドレスが公開されることはありません。縦書きで中央寄せにしたかったので3パターン試してみた【CSS】Classを付けるだけで要素が画面上までスクロールした時に要素を動かすJavascriptライブラリ【ScrollEffect.js】スマホの検索バーの表示・非表示でもリサイズ判定されるので対処してみた。PANELWordPressの.htaccessについて-特定のURLだけhttpsに飛ばしたりhttpに飛ばしたりPHPで画面サイズを判断して分岐したかったので、Jsで取得した画面の横幅を、sessionに入れてみた。YouTubeの動画をレスポンシブに対応させて貼り付けて見ました。三角関数を使って要素を円状に動かしてみる【Javascript】SNS系のボタンを追加してみる。