htmlサイド
<head>
<meta charset="utf-8">
<meta name="viewpoort" content="width=device-width, initial-scale=1.0">
<link href="loancalc.css" rel="stylesheet" type="text/css">
<script src="./loancalc.js"></script>
</head>
ＣＳＳサイド
@media screen and (max-width:959px{ // notepadのサイズ
#container{
width: 100%;} //ｃｓｓにcontainerのサイズをどのように決めていても、959pxより
小さくなれば画面サイズの100%を取得しろ、という命令。
#left-column{
width: 70%;}
}
@media screen and (max-width:640px{ // iphone 6とかのサイズ
#left-column{ // コラムが上下に表示される
width: 100%;}
#right-column{
width: 100%;}
}
@media screen and (max-width:320px{ // iphone 4とか(最少？）のサイズ
#container{
width: 320px;}
}
0 件のコメント:
コメントを投稿