@importが適用されない

レスポンシブデザインにするためにcssを振り分けようとする場合、以下のような感じで記述します。

@import url(../css/PC.css) screen and (min-width: 769px); /* 769以上 */
@import url(../css/tablet.css) screen and (max-width: 768px); /* 768以下 */
@import url(../css/iphone.css) screen and (max-width: 320px); /* 320以下 */

PCで見ればPC用のCSSが適用されスマホで見ればスマホのCSSが適用されます。

@importが適用されない場合、DOCTYPE宣言を以下のように指定し、メタタグを追加してください。

<!DOCTYPE html>
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />

これで１つのHTMLでレスポンシブデザインにすることができます。

コメント

タイトルとURLをコピーしました