はじめに
CSSのみで行った、レスポンシブ対応の方法を一例として記載します。
HTMLに記述
index.html
<head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0">//・・・①
<linkhref="style.css"rel="stylesheet"type="text/css">//・・・②
</head><h1>文字サイズと色が変わります。</h1>//・・・③
①headタグにこの一文を記載します。
②記載するcssです。
③cssが対応するセレクタです。
CSSに記述
style.css
/* ：1280px〜
------------------------------ *//*ここに基本CSSを書きます。*/h1{font-size:30px;}/* ：700px〜1279px
------------------------------ */@mediascreenand(min-width:700px)and(max-width:1279px){h1{font-size:20px;color:blue;}}/* ：480px〜699px
------------------------------ */@mediascreenand(min-width:480px)and(max-width:699px){h1{font-size:10px;color:red;}}/* ：〜479px
------------------------------ */@mediascreenand(max-width:479px){h1{font-size:5px;color:green;}}画面の幅のサイズによって対応するプロパティの値が決まります。
あとがき
これだけでレスポンシブ対応ができます。
メディアの規格ごとに細かい違いがあるので、どこを基準として設定するのかがポイントです。
他にも様々な方法があるのでより適した方法をチョイスしましょう。