レスポンシブデザインにするためにcssを振り分けようとする場合、以下のような感じで記述します。
|
1 2 3 |
@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宣言を以下のように指定し、メタタグを追加してください。
|
1 2 |
<!DOCTYPE html> <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" /> |
これで１つのHTMLでレスポンシブデザインにすることができます。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
