レスポンシブ・デザインの幅の設定

2016.3.7 (月)
Device width
PC 769px
iPad 641px – 768px
iPhone 320px – 640px

CSS1個でやるときにはこんな感じ。

@media screen and (min-width:769px) {
....
} 
@media screen and (min-width:641px) and (max-width: 768px) {
....
} 
@media screen and (min-width:320px) and (max-width: 640px) {
....
}

CSSをわけるのだったら、こういう感じ。

@import url("https://saba.omnioo.com/assets/css/base.css");
@import url("https://saba.omnioo.com/assets/css/pc.css") screen and (min-width:769px);
@import url("https://saba.omnioo.com/assets/css/pad.css") screen and (min-width:641px) and (max-width: 768px);
@import url("https://saba.omnioo.com/assets/css/sp.css") screen and (min-width:320px) and (max-width: 640px);