Para hacer un sitio web responsivo por tu cuenta necesitas de media queries
, estas son reglas que acotan estilos a diferentes resoluciones para los elementos que definas en estos, por ejemplo:
/* estos estilos son los que se aplican por defecto en tu sitio */
.col{
width: 45%;
background: #42F;
display:inline-block;
margin: 10px 0px;
}
.col h1{
font-size:55px;
color: #289;
text-align: center;
padding: 10px;
}
.col p{
font-size:20px;
color: #BB1;
padding: 10px;
}
/* aqui es donde reescrbes los valores que definiste,
no es necesario poner todos los valores completos, solo
lo que quieres que se vea diferente cuando hay un cambio de
resolución
Para evitar conflictos siempre coloca los media queries
al final de tu hoja de estilos
*/
@media (min-width: 768px) and (max-width: 959px) {
.col{
background: #3B1 !important;
}
.col h1{
font-size:30px;
padding: 5px;
}
.col p{
font-size:19px;
color: #B1C;
}
}
@media (min-width: 480px) and (max-width: 767px) {
.col{
background: #6F0 !important;
width: 90%;
}
.col h1{
font-size:25px;
padding: 5px;
}
.col p{
font-size:14px;
color: #3C1;
}
}
@media (min-width: 0px) and (max-width: 479px) {
.col{
background: #DDD !important;
width: 100%;
}
.col h1{
font-size:21px;
padding: 5px;
}
.col p{
font-size:12px;
color: #1CF;
}
}
<div class="col">
<h1>Titulo 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col">
<h1>Titulo 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Nota: ejecuta el snippet en fullscreen o de manera normal y redimensiona el ancho del navegador para ver los resultados. Dejo el link con más infomación acerca de los media queries.
Por medio de media queries puedes ajustar los estilos que tu desees para cada resolución, solo basta con reescribir el valor para cada selector.
Por otro lado, uno de los principales paradigmas del desarrollo de software es no reinventar la rueda. Asi que, en la actualidad disponemos de frameworks que nos facilitan el trabajo, con clases predefinidas que estan listas para que la utilicemos. Son muy sencillos de utilizar, la mayoria funciona con el concepto de rejillas y columnas y cuentan con una serie de utilities que solucionan algunas otras problematicas que se presentan en el maquetado de sitios web.
Dejo una lista con frameworks más populares: