初めてのレスポンシブ Web レイアウトを準備しています。
通常モード用とモバイルモード用の2つのcssを用意しました。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)"
href="css/mobile.css" />
</head>
デスクトップモード (CSS)
#face
{
background-image: url(../images/Face.png);
background-repeat: no-repeat;
height:155px;
}
モバイルモード (CSS)
#face
{
display:none;
}
しかし、ブラウザ ウィンドウをモバイル モードに減らしても、まだ #face が表示されています。
私が間違っていることを教えてください
前もって感謝します。
M