Media Querys css3 tamaños de pantalla

Lo más común es que usemos las Media Queries para detectar las dimensiones de la pantalla, a continuación un ejemplo con los tamaños más comunes usando min-width el cual determina el tamaño mínimo de la pantalla o usando max-width para el tamaño máximo de la pantalla donde se aplicara la regla de estilo.

@media (min-width: 320px) { .rd5_search__form .rd5_search__buttons .rd5_search__advance a { padding: 2.2rem 0; } }

@media (min-width: 480px) { .rd5_search__form .rd5_search__buttons .rd5_search__advance a { padding: 2.5rem 0; } }

@media (min-width: 768px) { .rd5_search__form .rd5_search__buttons .rh_prop_search__advance a { padding: 2.7rem 0; } }

@media (min-width: 1024px) { .rd5_search__form .rd5_search__buttons .rd5_search__advance a { padding: 3.3rem 0; } }

@media (min-width: 1140px) { .rd5_search__form .rd5_search__buttons .rd5_search__advance a { padding: 2.85rem 0; } }

@media (min-width: 1280px) { .rd5_search__form .rd5_search__buttons .rd5_search__advance a { padding: 3.6rem 0; } }

Cuando dierentes Media Queries son válidas para un entorno y surgen conflictos, éstos se resolverían por la norma de la cascada, de tal manera que las últimas reglas de estilo definidas serían las que se tendrían en cuenta.

Tagged under:
slide_template:
default
SiguenosTwitterFacebook