css - posiciones - Cambiar la posición de un elemento-sitio web sensible

posicionamiento css ejemplos

Question

¿Cómo puedo cambiar la posición de un elemento de izquierda a derecha en una pantalla más pequeña?

Esto es para pantallas más amplias:

.nav {
    position:absolute;
    top: 0px;
    left: 5%;
}

y me gustaría posicionarlo bien: 10px para la pantalla más pequeña.

Gracias.

=============================================== =========

Hice un enlace jsfiddle: http://jsfiddle.net/romullus/5u64M/

=============================================== =========

Answer 1

¿Tiene la metaetiqueta de la ventana gráfica en su encabezado? Sus consultas de medios no funcionarán correctamente sin él.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Answer 2

Puede establecer los puntos de ruptura de esta manera (suponiendo que 600 px es el punto de quiebre entre la pantalla pequeña y la pantalla grande)

@media screen and (min-width: 601px) {
   .nav {
    position:absolute;
    top: 0px;
    left: 5%;
 }
}



@media screen and (max-width: 600px) {
   .nav {
    position:absolute;
    right:10px;

 }
}

Aquí hay un jsfiddle

actualización 1

En referencia al violín actualizado provisto en la pregunta, el código de trabajo más nuevo en la lógica anterior será

    @media screen and (max-width: 600px) {
        .social-nav {
            position:absolute;
            right: 10px;
        }
        .social-nav ul {
            margin: 0;
            padding:0;
        }
        .social-nav ul li {
            list-style: none;
            display:block;
            background: #393939;
            padding:10px 10px 5px 10px;
            margin: 1px;
            opacity: .5;
            transition: all 0.6s ease-in-out;
        }
        .social-nav ul li:hover {
            opacity: .8;
            background:#fff;
        }
    }
    @media screen and (min-width: 600px) {
        .social-nav {
            background:#000;
            width:100%;
            position:absolute;
            top: 0px;
            left: 5%;
        }
        .social-nav ul {
            margin: 0;
            padding:0;
        }
        .social-nav ul li {
            list-style: none;
            display:table-cell;
            float: left;
            background: #393939;
            padding:100px 10px 5px 10px;
            margin: 1px;
            opacity: .5;
            transition: all 0.6s ease-in-out;
        }
        .social-nav ul li:hover {
            opacity: .8;
            background:#fff;
        }
        .social-nav ul li a {
            color:#fff;
        }
    }
}

Fiddle actualizado

Answer 3

Debería establecer una consulta de medios para el tamaño , como desea el navegador, para desplazar el elemento de izquierda a derecha en diferentes resoluciones.

   @media (min-width: 780px) and (max-width: 980px) {
   // CSS definition for element(s) at this resolution 

}

Por supuesto, cambiará el mínimo y máximo al tamaño deseado o puede establecer un ancho mínimo.