スタイルシートサンプル２

スマートフォンとパソコンでスタイルシートを変更

スマートフォンは画面が小さく、パソコン用に作ったサイトですと、見にくくなってしまいます。
スマートフォンとパソコンで、スタイルシートを変更しています。

画面の幅が650以下はphone.css、651以上はpc.cssで表示するようにしています。
スマートフォンでは自動で縮小してしまうので、viewportの行を追加して、縮小しないようにしています。
この方法を使えば、パソコンとスマートフォンのページを同時に作れます。

<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: 650px)">
<link rel="stylesheet" href="pc.css" type="text/css" media="screen and (min-width: 651px)">

パソコン用スタイルシート

pc.css
img{
	border: 0px;
}

body{
	padding:30px;
	line-height:120%;
}

h3{
	border-width:0 0 1px 7px;
	border-style:solid;
	border-color:#0B0099;
	padding:5px;
}

スマートフォン用スタイルシート

phone.css
body{
	line-height:120%;
}

H1{
	line-height:120%;
}

メニュー