@media (min-width: 40rem) {
.product-overview h1 {
font-size: 3rem;
}
}
@media (min-width: 40rem) {
.product-overview h1 {
font-size: 3rem;
}
}
@media (min-width: 60rem) {
.product-overview h1 {
font-size: 3rem;
}
}
Código por defecto (mobile First):
.plan {
background: #d5ffdc;
text-align: center;
padding: 1rem;
margin: 0.5rem 0;
width: 100%;
}
Código para Desktop:
@media (min-width: 40rem) {
.plan__list {
width: 100%;
text-align: center;
}
.plan {
display: inline-block;
width: 30%;
vertical-align: middle;
}
}
andPara que se cumplan dos condiciones.
Ejemplo con mínimo de ancho y dispositivo en horizontal (ej. iPad girado):
@media (min-width: 40rem) and (orientation: landscape) {}
,Es como un "or". Con que se cumpla una condición, vale.
Ejemplo con mínimo de ancho o dispositivo en vertical:
@media (min-width: 200rem), (orientation: portrait) {}
Estando el dispositivo en vertical (portrait), ya se aplicaría.