Supongamos que queremos cargar una hoja de estilos (.css) específica para Smartphones. En el caso de PrestaShop podemos cargar el css desde el archivo header.tpl que se encuentra en la ruta prestashop/themes/nuestra_plantilla
Veamos la sintaxis:
<link href="{$base_dir}themes/nuestra_plantilla/css/moviles_mio.css" rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 600px)" />
Este código hay que insertarlo en la etiqueta <head> del archivo header.tpl
Usando el atributo media podemos especificar el tipo de dispositivo que se verá afectado por la hoja de estilos cargada. En este caso utilizamos el valor handheld, que afecta a dispositivos móviles. La frase only screen and (max-device-width: 600px) podría traducirse así: "Para pantallas que tengan un ancho de 600px o menos."
De esta forma la hoja de estilos sólo afectará a dispositivos móviles del ancho especificado.
No hay comentarios: