Este codigo vendria a ser el codigo que haria "responsive" a la pagina. Me gustaria saber si esta bien hecho. Cabe destacar que por puera de los @medias
pegue el estilo de css para en que en el caso de que se vea en pc se vea bien.
@media (max-width: 460px) {
.red-text {
color: #1E90FF;
}
img{
max-width: 100%;
display: block;
height: auto;
}
h2 {
font-family: Lobster, monospace;
text-align: center;
font-size: 50px;
}
.tamaño1 {
font-size: 17px;
}
p {
font-size: 25px;
font-family: Lobster;
text-align: center;
}
.thick-green-border {
border-color: rgb(107, 170, 170);
border-width: 10px;
border-style: solid;
border-radius: 50%;
display: block;
margin-left: auto;
margin-right: auto;
height: 200px;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.smaller-image {
width: 100px;
}
body {
background-color: antiquewhite;
}
.fullCard {
border: 1px solid #ccc;
border-radius: 15px;
margin: 10px 5px;
padding: 4px;
width: 350px;
margin-left: auto;
margin-right: auto;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
background: linear-gradient(35deg,#CCFFFF, #FFCCCC );
font-family: Montserrat;
}
a{
color: black;
}
a:hover{
color: blue;
}
}
Respectivamente repetiria dos @media: @media (max-width: 700px)
, @media (max-width: 600px)
con los mismos estilos que puse en el ejemplo anterior.
En el caso de que este mal me gustaria saber cual es la forma correcta de hacer responsive una pagina ya que soy autodidacta y cada sitio tiene su manera.
max-width
para especificar estilos para pantallas más pequeñas como tabletas y móviles). Personalmente, prefiero el diseño mobile-first donde se empieza con el móvil y se construye hacia pantallas más grandes (con media queries conmin-width
).