調べてみました。
下記でうまくいきました。
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="phone.css" type="text/css" media="screen and (min-width: 0px) and (max-width: 480px)">
<link rel="stylesheet" href="tab.css" type="text/css" media="screen and (min-width: 481px) and (max-width: 800px)">
<link rel="stylesheet" href="pc.css" type="text/css" media="screen and (min-width: 801px)">
phone.cssにスマートフォン用のスタイルシート、
tab.cssにタブレット用のスタイルシート、
pc.cssにパソコン用のスタイルシートを記載しています。
画面サイズごとにスタイルシートを指定すれば、良いかなと思って試しましたが、
スマートフォン、タブレットが勝手に縮小表示する場合がありましたので、
最初のmetaのviewportで、最初は縮小表示しないように指定します。
これで、スマートフォン、タブレットもきれいに表示できるようになりました。
