Estilos CSS receptivos en línea sobre la marcha

3 minutos de lectura

Actualmente estoy trabajando en un sitio altamente orientado al diseño basado en wordpress CMS.

Actualmente tengo una hoja de estilo principal receptiva vinculada externamente para el CSS principal. Como el sitio depende en gran medida del espaciado y las alineaciones tanto del texto como de las imágenes, se ha vuelto necesario agregar CSS en línea usando style= HTML para anular a veces el CSS externo.

El problema que tengo es que, en la mayoría de los casos, ciertos elementos, como los márgenes, deben tener un porcentaje diferente en la vista móvil que en la vista de escritorio para equilibrar la composición visual. ¿Hay alguna forma de agregar responsiveness al CSS en línea basado en el ancho de la pantalla como se puede hacer en una hoja de estilo externa?

Hasta ahora, la única forma en que puedo pensar en lograr esto es a través de jQuery modificando el CSS externo en función del ancho de la pantalla de los usuarios; sin embargo, esto significaría establecer reglas estrictas en el JS, por ejemplo: para la vista de escritorio con márgenes establecidos en 70% y para configuración móvil ellos al 90%.

Si fuera posible hacer esto en línea usando el estilo html, esto le daría a mi cliente un control más estricto y más flexibilidad. Afortunadamente, mi cliente está bien versado en CSS.

avatar de usuario
james holderness

Siempre puede agregar un bloque de css en línea con un elemento de estilo:

<style type="text/css">
@media screen and (min-width:800px) {
   .inlineOverride {
     /* add more styles here */
   }       
}    
</style>

<div class="inlineOverride">
</div>

Vale la pena mencionar que HTML5 ha introducido una alcance atributo que puede establecer en el elemento de estilo para limitar la información de estilo especificada al elemento principal del elemento de estilo y a los descendientes de ese elemento.

Todavía no es ampliamente compatible, por lo que no se debe confiar en él, pero podría ser útil a largo plazo para ayudar a evitar que los estilos en línea como este se “filtren” en otras partes del documento.

  • Gracias, puedo ver una posibilidad aquí, lo probaré 🙂

    – Espectáculo secundario

    9 de julio de 2013 a las 8:11

avatar de usuario
Zahid Khan

Esta pregunta/respuesta podría ser útil para usted (léala detenidamente) use @media para ajustar sus propiedades de css de acuerdo con el ancho y alto del dispositivo. ¿Qué significa @media screen y (max-width: 1024px) en CSS?

  • Por favor, no publiques respuestas de solo enlace. Si cree que esta pregunta es un duplicado, márquela como tal.

    – Blazemonger

    10/04/2015 a las 18:50

En los navegadores modernos, puede (más o menos) archivar esto usando propiedades css personalizadas (variables css):

@media (max-width: 1100px) {
  * {
    color: var(--color-sm)
  }
}
<a style="--color-sm: #11f">Text</a>

(Ampliar Fragmento o abrir en página completa para obtener el otro comportamiento)

(El color se usa para simplificar la presentación, solo use el margen o cualquier otra propiedad css según su caso de uso).

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad