Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Problema con los media query

CSS - Problema con los media query

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 6
Ha disminuido su posición en 3 puestos en CSS (en relación al último mes)
Gráfica de CSS

Problema con los media query

Publicado por Sergio (3 intervenciones) el 20/12/2019 01:30:04
Buenas, os comento estoy haciendo una pagina donde le digo que cuando pase a los 451px se pone en rojo el section, y eso me lo hace bien, el problema que quiero ponerlo en azul cuando baje a 450 o menos y no me deja que tengo que hacer?Este es mi codigo:
1
2
<link rel="stylesheet" media="screen and (min-width:450px)" href="css/movil.css">
<link rel="stylesheet" media="screen and (min-width:451px)" href="css/ordenador.css">
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
Imágen de perfil de ScriptShow
Val: 571
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Problema con los media query

Publicado por ScriptShow (125 intervenciones) el 21/12/2019 17:40:30
Saludos Sergio,

un ejemplo sencillo de entender y adaptar:

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
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@media screen and (max-width:450px) {
.test {
width:200px;
height:200px;
background-color:#00f !important;
transition:all .8s ease;
}
}
 
@media screen and (min-width:451px) {
.test {
width:400px;
height:400px;
background-color:#f00 !important;
transition:all .8s ease;
}
}
</style>
</head>
<body>
<div class="test"> T e s t </div>
</body>
</html>

1
2
<link rel="stylesheet" media="screen and (max-width:450px)" href="css/movil.css">
<link rel="stylesheet" media="screen and (min-width:451px)" href="css/ordenador.css">

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil
Val: 6
Ha disminuido su posición en 3 puestos en CSS (en relación al último mes)
Gráfica de CSS

Problema con los media query

Publicado por Sergio (3 intervenciones) el 23/12/2019 11:27:48
la cosa es que lo estaria leyendo de los dos sitios, eso no seria poco eficiente a la hora de cargar la pagina?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 6
Ha disminuido su posición en 3 puestos en CSS (en relación al último mes)
Gráfica de CSS

Problema con los media query

Publicado por Sergio (3 intervenciones) el 23/12/2019 12:51:21
ami lño que me falla la seccion, la cosa es que es muy raro por que de ancho le doy 650px y en el navegador me sale 588 y deberia aplicarme el azul no se por que no me lo aplica
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de juan jose
Val: 165
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Problema con los media query

Publicado por juan jose (57 intervenciones) el 23/12/2019 23:26:33
no te funciona por que el min-width:450px deberia de ser max-width:450px

es decir uno es hasta 450 (max)
y otro desde 451 (min)

aun asi yo lo pondria todo en un simple css



HTML




1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id=todo></div>
 
</body>
</html>



CSS




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
*{
    padding: 0;
    margin: 0;
}
#todo{
    width: 100vw;
    height: 100vh;
}
/* cuando sea como maximo 450, es decir menor */
@media screen and (max-width:450px){
    #todo{
        background: blue;
    }
}
/* cuando sea como minimo 451, es decir mayor */
@media screen and (min-width:451px){
    #todo{
        background:black;
    }
}


450


451

practicamente es lo que te dijo ScriptShow


salu2
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar