You could do something like this through media queries
<link rel="stylesheet" media="screen and (min-device-width: 1024px)" href="https://stackoverflow.com/questions/21937880/pc.css" />
<link rel="stylesheet" media="screen and (max-device-width: 1024px)" href="mobile.css" />
If you wanted to go the Javascript route for this
function adjustStyle(width) {
width = parseInt(width);
if (width < 1024) {
$("#size-stylesheet").attr("href", "css/mobile.css");
} else {
$("#size-stylesheet").attr("href", "css/pc.css");
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});
It may be more reliable do accomplish this with media queries in CSS. Because some browsers do not have JavaScript enabled, especially mobile browsers, it is considered a best practice to support basic functionality without JavaScript. See this answer by Haylem for more.
A great explanation of CSS3 media queries is available in this SmashingMagazine.com article, “How to Use CSS3 Media Queries”. In your example, you could quickly implement this as follows:
<style>
@import url(/pc.css) (min-width:480px);
@import url(/mobile.css) (max-width:480px);
</style>
Naturally this will not work in ancient versions of Internet Explorer, so you might need to consider this also:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="https://stackoverflow.com/pc.css"/>
<![endif]-->
However, if you do not have strong experience with responsive web design (RWD), you may be better off considering a CSS framework like Foundation or Bootstrap. Check out this Mashable.com article for a good overview.
You might also want to check out HTML5 Boilerplate which is used in the more comprehensive quick start kit, INIT.