Source: https://www.cssblog.es/detectar-la-resolucion-de-pantalla-y-aplicarle-estilos/
Timestamp: 2020-04-10 03:53:01+00:00

Document:
Detectar la resolución de la pantalla y aplicarle estilos - CSSBlog ES
Detectar la resolución de la pantalla y aplicarle estilos
8 octubre 2009, en CSS Avanzado, por Pedro CM
Quizás alguna vez hemos tenido la necesidad de aplicar estilos según la resolución de la página. En esta entrada aprenderemos como detectar dicha resolución y aplicarle estilos, gracias a Javascript.
El primer paso será cargar las hojas de estilo, la librería JQuery y nuestro código Javascript.
<link rel="stylesheet" type="text/css" href="detect800.css"/>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22jquery.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&amp;lt;script&amp;gt;" title="&amp;lt;script&amp;gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22detect.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&amp;lt;script&amp;gt;" title="&amp;lt;script&amp;gt;" />
<div>El color de este texto es variable.</div>
Vamos a detectar si la resolución del usuario es menor que 1024 x 768 píxeles. Si lo es, cambiaremos la hoja de estilos.
Como dije, crearemos 2 hojas de estilos, una llamada detect800.css, y otra detect1024.css, para las resoluciones 800 x 600 y 1024 x 768, respectivamente.
Por ejemplo, para la hoja de estilos detect800.css puede ser algo así:
font: 24px Helvetica, Georgia, serif;
Y para la hoja de estilos detect1024.css, insertaremos este código, por ejemplo:
font: 22px "Trebuchet MS", sans-serif;
Detectando la resolución de la pantalla
Añadiremos una alerta Javascript que hará una pausa hasta que hagamos click en OK y consigamos ver el estilo anterior.
if ((screen.width>=1024) &amp;amp;&amp;amp; (screen.height>=768)) {
alert('Resolucion: 1024x768 o mayor');
else&amp;amp;nbsp; {
alert('Resolucion: Menos de 1024x768, a lo mejor es 800x600');
Asociaremos las 2 resoluciones a sus respectivos estilos, redirigiendo su dirección a otra hoja de estilos distinta. Ahora, desde que se está cargando reset.css en primer lugar, se añadirá el modificador :not(:first), así que esto no afectará al primer elemento.
La versión adaptada para sitios realizados en Drupal es esta:
if ((screen.width<=1024)) {
filename="sites/all/themes/mytheme/1024.css"
Finalmente, podemos ver un ejemplo de su funcionamiento o descargar el ejemplo.
Ver el ejemplo sobre los estilos variables según la resolución
Descargar el ejemplo sobre los estilos variables según la resolución

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución