HTML mobile friendly website

Question

I have created a simple website and I am trying to make it mobile friendly.

I have tried using various methods such as:

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='mobile.css' />

And jQuery:

<link rel="stylesheet" type="text/css" href="main.css" />
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="mobile.css" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>   
function adjustStyle(width) {
width = parseInt(width);
if (width < 900) {
$("#size-stylesheet").attr("href", "mobile.css");
}  else {
   $("#size-stylesheet").attr("href", "main.css"); 
 }
}

$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
 adjustStyle($(this).width());
});
});
</script>

No method seems to work. For example, on a mobile device the webpage looks the same (from main.css and not mobile.css). Any ideas or any other way to do it?

EDIT:

I now have the following set up:

<link rel='stylesheet' media='screen and (min-width: 701px)' href='main.css' />
<link rel='stylesheet' media='screen and (max-width: 700px)' href='mobile.css' />

But on a mobile device it uses main.css (which it should not do as the minimum width isn't 901px). If I switch the css files around, for example main.css going to min-width 10px and max-width 900px, and mobile.css going to min-width 901px. Then the website changes accordingly, and on a computer the mobile css is now shown (which should happen), but the mobile device is also showing the mobile css (which it shouldn't because they have been swapped around). So the mobile device is constantly using the incorrect css.

EDIT EDIT:

Viewport kind of makes it work. But there is some issue, for example I update my CSS file. I check mobiletest.me and the changes are made, but on a physical mobile device (the same device on mobiletest.me) the changes are made

Answer 1

One way you could do it is a CSS3 @media Rule:

    @media screen and (max-width: ...px){
   }

This allows you to change the your style at certain screen sizes:

for Example:

#div1 {
  width: 60%;
  height: 50px;
  background: red;
}
@media screen and (max-width: 600px) {
  #div1 {
    width: 80%;
    height: 50px;
    background: blue;
  }
}

<div id="div1"></div>