レスポンシブデザインにするために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" />
これで1つのHTMLでレスポンシブデザインにすることができます。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント