Verificar la resolución de pantalla

[Biiiiilm]

Hola, ante todo aclarar que soy novata en programación en CSS :)
Quiero que una imagen que tengo posicionada como fixed al margen izquierdo de mi web, solo aparezca para resoluciones con una anchura mayor que una dada (1200 px, por ejemplo).

Tengo esto:

<style>
p.imagen
{
position:fixed;
top:20px;
left:1px;
z-index:+1;
}
</style>

<p class="imagen">
AQUÍ VA LA IMAGEN</p>

Entonces, debo, en primer lugar hacerme con la anchura del visitante de mi web, pero no me funciona:

anchura = screen.width

No sé de qué otra forma obtenerla. Y después no sé donde tengo que meter el condicional (if). Es decir, si es menor que 1200px, ignora todo el códido, sino que lo lea y aparezca la imagen.

¿Se me entiende?
Gracias chic@s! :D

[Triby]

Busca info de: css media queries

[Biiiiilm]

Esperaba una respuesta algo más personalizada para un problema tan específico.

[pzin]

Iniciado por Biiiiilm

Esperaba una respuesta algo más personalizada para un problema tan específico.

La respuesta de Triby debería de ser suficiente. Es más, si estás empezando es mejor una respuesta "no personalizada" para que busques la información y sepas porqué y cómo.

[Biiiiilm]

Ya lo he arreglado. Lo he hecho con Javascript.

[Gothgauss]

Iniciado por Biiiiilm

Ya lo he arreglado. Lo he hecho con Javascript.

Es que es la única manera creo para uqe te valga en todos los ordenadores. Acuérdate de que IE8 sigue valiendo, por loq ue hacer una web con html5 haría que en ie8 no se viera bien.

Si ie8 ya no existiera podrías hacerlo con css3, que si permite en función de la resolución, aplicar uno u otro estilo

[jluisfg]

Hola! Que molesto es recibir solo respuestas condescendientes y que no te resuelvan tu duda.

Si no estas haciendo un sitio web responsivo, es decir que se adapta a telefonos moviles y demas te conviene mas hacerlo con javascript.

Si lo haces con diseño responsivo puedes usar las siguientes reglas en tu hoja de estilos:

and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

Saludos!

[pzin]

jluisfg no me queda claro si conoces el significado de condescendiente. De todas formas, mejor las respuestas anteriores a lo que has hecho tú; pegar código de algún sitio de forma incompleta que no funcionará. Para una respuesta así, yo casi que prefiero que no se me respondiera.

[serenhopy]

Hola Biiiiilm!

Para hacerlo en CSS3 existe esta posibilidad:

Código CSS:

@media only screen and (max-device-width: 480px) {
        p.imagen{display: none;}
}
 

Creo que eso te funcionará, lo que hace esta propiedad css es decirle al navegador que cuando las pantallas tengan hasta 480px de anchura que la imagen no se muestre, pero si la pantalla tiene una resolución superior, entonces se ignorarán estas instrucciones.
Aunque es posible que algunos navegadores como IE8 no lo soporte, pero si fuera yo lo pondria igualmente, ya que el usuario que le interesa el diseño de las webs y que todo se visualice bien, tiene el navegador actualizado.

Espero que te sirva!