How to make a website look appropriate both on the "big screen" and on a mobile device screen?

For the zoom problem you have to add a meta-tag to indicate the values ​​of the viewport .

<meta name="viewport" content="width=device-width, initial-scale=1">

Thus, for example, indicate that the width of the mobile browser is equal to the width of the device screen itself.

You have more information about this meta-tag on the MDN .

But there is really NO easy way to do it . And this is because it depends on many things, mainly on how your site is built.

Responsive design

Nowadays, since there is so much variety of resolutions, the ideal is either to use different versions of the web, or to use a responsive design ( Responsive Web Design ).

These types of designs are based on liquid designs (generally) in which then, through media-queries , it is indicated in CSS how the design should behave depending on the size of the screen.

A very simplistic example would be that in a resolution of 1024*768four columns would be seen and in a resolution of 320*480one would be seen.

Use media queries

The media query is the mechanism that CSS has to test certain aspects of the User Agent and the device where the document is being displayed. This includes the dimensions of the screen, but you can also tell if it's a printer, which is very useful.

Each media query is a logical expression that can be true or false, (it is similar to an IF).

There are 3 ways to use them:

Through the "media" attribute of the "link" element, that is, using different files .cssfor each "variant" of your page.

 <link rel="stylesheet" media="screen and (width <= 640px)" href="mobiles.css" />
 <link rel="stylesheet" media="screen and (width > 640px)" href="escritorio.css" />
 <link rel="stylesheet" media="print" href="para_imprimir.css" />

By importing more styles into one CSS file, just like before, you use different CSS files for each variant.

 @import url(mobiles.css) screen and (width <= 640px);
 @import url(escritorio.css) screen and (width > 640px);
 @import url(para_imprimir.css) print;

Conditionally applying styles within a CSS (my favorite)

.clase {
   // propiedades comunes a todos los medios aqui.
}

@media screen and (width <= 640px) {
  .clase {
    // propiedades para mobiles aqui.
  }
}  

@media screen and (width > 640px) {
  .clase {
    // propiedades de escritorio aqui
  }
} 

@media print {
  .clase {
    // propiedades impresora aqui.
  }
} 

There are other variables that can be tested to decide which styles to use, for example screen orientation:

@media (orientation:portrait) { 
   // el celular o tableta esta en modo retrato
}

@media (orientation:landscape) { 
   // el celular o tableta esta apaisado
}

I recommend that you read the media queries draft to see what other options are available to you.

Well, although there are people who say that it is not easy, I use Bootstrap for large web apps and complement it with CSS3.

Now, if your app is small and well-formed, with a couple of tags @mediathat change the proportion you will have enough:

First define a container for your html with the columns you need, these are going to be the responsive ones and the elements inside must be of relative position and sizes with percentage, NEVER WITH FIXED PIXELS!

Then define the size of the standard columns, those of medium screen and those of mobile (let's imagine 3 columns in large, 2 + 1 in the middle and 3 rows in mobile.

/* Tamaño estandard para escritorio */
.col-1 {width: 33.33%;}
.col-2 {width: 33.33%;}
.col-3 {width: 33.33%;}

@media only screen and (max-width: 768px) {
    /* Moviles y tablets: */
    [class*="col-"] {
        width: 100%;  /* todas las columnas ocupan el 100% creando 3 filas */
    }
}

@media only screen and (max-width: 1499px) and (min-width: 800px) {
    /* tamaño de pantalla mediana / pequeña */
    .col-1 {width: 50.00%;}
    .col-2 {width: 50.00%;}
    .col-3 {width: 100.00%;}
}

And voila, just to be clear, check out this live example on fiddle and resize the screen to see the 3 layouts that are created depending on the size.

NOTE: I have put an extra footer in the example to give information.

* {
    box-sizing: border-box;
}
.row:after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}

    /* Tamaño estandard para escritorio */
    .col-1 {width: 33.33%;}
    .col-2 {width: 33.33%;}
    .col-3 {width: 33.33%;}
    
    @media only screen and (max-width: 768px) {
        /* Moviles y tablets: */
        [class*="col-"] {
            width: 100%; /* todas las columnas ocupan el 100% creando 3 filas */
        }
    }
    
    @media only screen and (max-width: 1499px) and (min-width: 800px) {
    	/* tamaño de pantalla mediana / pequeña */
        .col-1 {width: 50.00%;}
        .col-2 {width: 50.00%;}
        .col-3 {width: 100.00%;}
    }

  <body>

<div class="row">

<div class="col-1 menu">
<ul>
<li>El vuelo</li>
<li>La ciudad</li>
<li>La isla</li>
</ul>
</div>

<div class="col-2">
<h1>La ciudad</h1>
<p>texto de ejemplotexto de ejemplotexto de ejemplotexto de ejemplotexto de ejemplotexto de ejemplo</p>
</div>
<div class="col-3 right">
<div class="aside">
<h2>QUE?</h2>
<p>texto de ejemplo</p>
<h2>DONDE?</h2>
<p>texto de ejemplo</p>
<h2>COMO?</h2>
<p>texto de ejemplo</p>
</div>
</div>

</div>

<div class="footer">
<p>Para ver como funciona el ejemplo cambia el tamaño del explorador o del area de resultado.</p>
</div>

</body>

Bootstrap is undoubtedly a good candidate for you to make your page responsive, it is very easy to use, you can use it in "plain html" (without framework), it has good documentation, a large community and its general scheme is easy to understand and use.

There really isn't an easy way to do it automatically with a ready-made web page. You would need to do it following an adaptive design (or responsive as it is commonly known).

Basically you will have to play with the CSS media queries , with screen being the media type for desktop screens and handheld for mobile.

The thing would look like this for mobiles, for example:

<link media="handheld" type="text/css" href="/css/movil.css" rel="stylesheet">

And so the one you're already using for desktops:

<link media="screen" type="text/css" href="/css/index.css" rel="stylesheet">

For more information I leave you here a couple of references in Spanish, from Google and Mozilla .

I would like to add here Foundation Zurb, in its version 6. It is completely responsive, with many add-ons, grid layout, many plugins javascriptfor mobile functions, it is completely focused on responsiveness.

What can I tell you, it is surprising, it is implementing many of the technologies that have already become fashionable, as well as other new ones. It has quite a few libraries for modals.

It also already has a package npmand bowerfor cli, simple predesigned templates, if you want something basic, or complete, for heavy work, with files configured for gulpor grunt, it would be missing webpack, compiled packages sassand js, among others.

I'm going to implement it myself now, but this time seriously, modifying sassonly what I need and adding only the modules that are necessary, which will not only make it responsive, but also lighter.

I would also have talked about framework like Bootstrap and I would have talked about using widthy max-widthwith percentage values ​​in CSS and using media query.

The only thing I would like to add to the other answers concerns the use of the mobile-first approach .

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap o otro -->
<style>
.ejemplo{font-size:24px}
@media (min-width: 768px){.ejemplo{font-size:36px}}
</style>
</head>

<body>
<div class="ejemplo">Texto texto texto texto.</div>
</body>
</html>

In particular, prefer @media (min-width: )instead of @media (max-width: )because the main style is for smaller devices, not the other way around:

.ejemplo{font-size:24px}
@media (min-width: 768px){.ejemplo{font-size:36px}}

should be preferred to

.ejemplo{font-size:36px}
@media (max-width: 767px){.ejemplo{font-size:24px}}

I'm sorry but I only speak Italian and I used Google translate :)