CSS - Mantener un div en el mismo lugar en diferentes pantallas

 
Vista:
Imágen de perfil de edmundo
Val: 4
Ha aumentado su posición en 153 puestos en CSS (en relación al último mes)
Gráfica de CSS

Mantener un div en el mismo lugar en diferentes pantallas

Publicado por edmundo (2 intervenciones) el 22/10/2020 22:47:18
Hola comunidad, tengo un problema y necesito ayuadaaaaaaaaaa.
veran estoy haciendo una practica, quiero hacer una maqueta totalmente responsive, pero solo con html, css y js, el detalle que me perturba en este momento es: yo usé el @media screen para dar las dimensiones a cada pantalla de manera individual de 1440px, 1020px, 768px y 425px, todos estos funcionan bien en todos los elementos, pero hay una dimensión que no incluí que es la que esta entre 1020px y 768px, yo la puse como 950px, y sin esta dimensión en mi pantalla solo un elemento se sale de donde tiene que estar ubicado, aqui les paso el css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
.nav{
    display: flex;
    width: 100%;
    height: 9.7%;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 80%;
    border: blue 2px solid;
 
}
.nav div{
    margin: 30px;
 
}
.nav div a{
    text-decoration: none;
    font-size: 28px;
    color: black;
}
 
 
@media screen and (max-width:1440px){
    .contenedor{
        height: 300px;
        width: 100%;
    }
    .logo{
        font-size: 45px;
    }
    .padre-menu-icon{
        left: 0%;
        width: calc(100%-5%);
    }
    .padre-menu-icon div a img{
        width: 2.5vw;
        height: 2.5vw;
    }
    .nav{
        top: 7.2%;
        height: 8%;
    }
    .nav div{
        margin: 50px;
    }
 
 
}
@media screen and (max-width:1024px){
    .contenedor{
        width: 100%
    }
    .padre-menu-icon{
        width: calc(100%-5%);
    }
    .padre-menu-icon div a img{
        width: 2.5vw;
        height: 2.5vw;
    }
    .nav{
        top: 9%;
        height: 6.1%;
    }
    .nav div{
        margin: 50px;
    }
    .nav div a{
        font-size: 20px;
    }
}
@media screen and (max-width:950px){
    .nav{
        top: 10.4%;
        height: 9.7%;
    }
 
}
@media screen and (max-width:768px){
    .contenedor{
        height: 300px;
        width: 100%;
    }
    .logo{
        top: 1%;
    }
    .padre-menu-icon{
        top: -5%;
    }
    .padre-menu-icon div a img{
        width: 2.5vw;
        height: 2.5vw;
    }
    .nav{
        top: 9.8%;
        height: 5.2%;
    }
    .nav div{
        margin: 27px;
    }
    .nav div a{
        font-size: 18px;
    }
}
@media screen and (max-width:425px){
    .contenedor{
        height: 250px;
        width: 100%;
    }
    .logo{
        top: 2%;
        left: 40%;
        font-size: 30px;
    }
    .padre-menu-icon{
        top: -5%;
    }
    .padre-menu-icon div{
        margin: 5px;
    }
    .padre-menu-icon div a img{
        width: 2.5vw;
        height: 2.5vw;
    }
    .nav{
        top: 8%;
        height: 5%;
    }
    .nav div{
        margin: 10px;
    }
    .nav div a{
        font-size: 12px;
    }
}

y este es el html al que le estoy aplicando el css:

1
2
3
4
5
6
7
8
<div class="nav">
                    <div><a class="menu_link" href="Mujer.html">Mujer</a></div>
                    <div><a href="./Hombre.html">Hombre</a></div>
                    <div><a href="./Accesorios.html">Accesorios</a></div>
                    <div><a href="./Oferta.html">Oferta</a></div>
                    <div><a href="./Tienda.html">Tienda</a></div>
                </div>
            </div>
la parte que nos interesa es la de las dimensiones de la etiqueta nav
Sin-titulo asi queda cuando esta en pantalla completa y con las dimensiones para 950px, pero cuando lo cambia 1440px
Sin-titulo2 no se por que una dimensión altera la otra, ayuda
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder