PCとスマホで呼び出すCSS切り替え

最近はSassが楽なのでメディアクエリでやっちゃってますけど、
CSSごと読み替えしちゃいたいとき用に

linkで切り替え

この場合は閲覧環境のブラウザの横幅で切り替え

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px)" href="sp.css">
<link rel="stylesheet" type="text/css" media="screen and (min-device-width:481px)" href="pc.css">

横幅じゃなくてデバイスの種類で切り替えるJS

<script>
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
document.write('<link rel="stylesheet" type="text/css" href="sp.css">');
} else {
document.write('<link rel="stylesheet" type="text/css" href="pc.css">');
}
</script>

スマホはスマホ！PCはPC！て感じにガッチリめに切り替えしたいなら
後者のJSの方がおすすめ。