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

レスポンシブデザインの基本になるCSSでのView Portの設定方法です。
何を設定してあげるのかというと、ブラウザー幅に対してどのCSSを使うのかというのをその条件に従って指示してあげるという感じです。If文とまではいかないのですが、CSSはついに条件式的なものを書けるようになってしまいました。
@import url("http://www.omnioo.com/omnioolab2/common/css/base.css");
@import url("http://www.omnioo.com/omnioolab2/common/css/pc.css") screen and (min-width:769px);
@import url("http://www.omnioo.com/omnioolab2/common/css/pad.css") screen and (min-width:641px) and (max-width: 768px);
@import url("http://www.omnioo.com/omnioolab2/common/css/sp.css") screen and (min-width:320px) and (max-width: 640px);

自分が開発中に最も合理的だなと思ったのは、基本形になるCSSをまず作成してそれらを共通に読み込ませてから、それぞれPC,Tablet,SmartPhoneみたいな感じで分けてやるのがよいです。
この例では主にAppleのiMac,iPad,iPhoneを念頭に設定していますが、その他のAndroid系のデバイスでも使えたので、このままで大丈夫です。