Hola a todos
Estoy usando una consulta de medios 'principal' para apuntar a todos los cambios importantes desde el escritorio al móvil con esto (scss):
// media breakpoint variables
$mob-exslim: 320px;
$mob-slim: 360px;
$mob-regular: 375px;
$mob-medium: 390px;
$mob-plus: 414px;
$mob-large: 428px;
@media screen and (min-width: $mob-exslim) and (max-width: 1020px) {
.contact-indicator {
display: none;
}
.hero-wrap {
margin-top: 70px;
overflow-x: hidden;
// disable left side of the hero
.left-side {
display: none;
.main-img {
display: none;
}
.hero-arrow {
display: none;
}
}
// disable the right side of the hero
.right-side {
display: none;
.main-heading {
display: none;
}
.hero-descrip {
display: none;
}
.button-wrap {
display: none;
.hero-btn {
display: none;
}
.btn-arrow {
display: none;
}
}
}
.mobile-title {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
.flex-left {
min-width: 100vw;
width: 100vw;
max-width: 100vw;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
.mobile-h2 {
position: absolute;
right: 19px;
font-size: 33px;
font-weight: 300;
text-align: right;
max-width: 298px;
width: 298px;
min-width: 298px;
margin: 8px 0 0 0;
padding: 0;
}
.mobile-hero-img {
max-width: 355px;
margin-right: -140px;
}
}
.mobile-hero-p {
margin-left: -45px;
font-size: 15.5px;
margin-top: 55px;
max-width: 272px;
line-height: 26px;
}
.mobile-hero-btn {
margin-top: 45px;
min-width: 191px;
max-width: 191px;
min-height: 53px;
height: 53px;
max-height: 53px;
border-radius: 14.5px;
background-color: $grid-black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
cursor: pointer;
}
}
}
}
Y luego, cuando intento ser más específico con las ventanas gráficas como esta:
// 375PX WIDTH & 667PX HEIGHT -- iPHONE 6,7,8
@media screen and (min-width: $mob-regular) and (max-width: 389px),
screen and (min-height: 667px) and (max-height: 667px) {
.hero-wrap {
margin-top: 65px;
}
.mobile-title {
.mobile-hero-p {
margin-top: 40px;
}
}
}
// 375PX WIDTH & 812PX HEIGHT -- iPHONE X, XS, 11 PRO
@media screen and (min-width: $mob-regular) and (max-width: 389px),
screen and (max-height: 812px) {
.mobile-title {
.mobile-hero-p {
margin-top: 70px;
}
}
}
Las dos últimas consultas de medios no parecen registrarse.
Si te ayuda, todo el código está disponible en github: https://github.com/DesignedByNino/gridbase-studio en la carpeta 'src' en 'css/index.scss'.
Este proyecto utiliza vue.js, pero no es exactamente relevante para la pregunta, solo para que lo sepas si le echas un vistazo.
¡Gracias de antemano por todas las respuestas!
Le falta un } al final del primer fragmento de código proporcionado por usted.
- Manas Khandelwal
28/03/2021 a las 17:48
@ManasKhandelwal, gracias por señalarlo, amigo, pero desafortunadamente solo me falta copiarlo y pegarlo desde vs code a este sitio web, la base del código real incluye ese '}' último paréntesis.
-Nino P
28/03/2021 a las 18:45
@ManasKhandelwal, puedes echar un vistazo al proyecto completo, lo tengo alojado en github, hay un enlace en la descripción de la pregunta.
-Nino P
28/03/2021 a las 18:49
------------------------------------
Como dice mdn:
Un sitio típico optimizado para dispositivos móviles contiene algo como lo siguiente:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
La propiedad de ancho controla el tamaño de la ventana gráfica. Se puede configurar en
un número específico de píxeles como ancho = 600 o al valor especial
ancho del dispositivo, que es el anchode la pantalla en píxeles CSS a una
escala del 100%. (Hay alturas correspondientes y altura del dispositivo
valores, que pueden ser útiles para páginas con elementos que cambian de tamaño
o posición basada en la altura de la ventana gráfica.)
La propiedad de escala inicial controla el nivel de zoom cuando la página está
primero cargado. La escala máxima, la escala mínima y la escalable por el usuario.
Las propiedades controlan cómo se permite a los usuarios acercar o alejar la página.
y luego puedes usar tus consultas de medios:
@media (min-height: 768px) and (max-height: 768px)
and (min-width: 1366px) and (max-width: 1366px) {
}
ACTUALIZACIÓN:
He creado una muestra simplificada:
@media screen and (min-width: 320px) and (max-width: 1020px)
and (min-height: 813px)
{
.mobile-title {
background-color: lightgreen;
}
}
@media screen and (min-width: 375px) and (max-width: 389px),
screen and (min-height: 0px) and (max-height: 667px) {
.mobile-title {
background-color: lightpink;
}
}
@media screen and (min-width: 375px) and (max-width: 389px),
screen and (min-height: 668px) and (max-height: 812px) {
.mobile-title {
background-color: lightgoldenrodyellow;
}
}
<div class="mobile-title">
A title
</div>
3
Gracias por la respuesta, pero la etiqueta ` meta ` ya está presente y funciona correctamente, la primera consulta de medios funciona bien, es cuando intento implementar las otras más específicas que es no registrarse. Es bastante extraño ya que CSS funciona de arriba a abajo, por lo que los últimos conjuntos de reglas deberían anular el superior en la primera consulta de medios.
-Nino P
28/03/2021 a las 19:30
@NinoP, por favor, mira mi respuesta actualizada. He creado un simEjemplo simplificado y comprobado con diferentes dispositivos. Puedes ajustarlo a tus necesidades.
-StepUp
28/03/2021 a las 20:07
Gracias de nuevo por el interés @StepUp, pero lamentablemente no funciona en mi proyecto. Lo que estoy tratando de hacer es ajustar el margen superior de 2 elementos, un párrafo y un elemento principal div según la altura del dispositivo (dado que un iPhone X tiene una pantalla más alta (altura: 812 px) que un iPhone 6,7, 8, altura: 667 px; sin embargo, tiene el mismo ancho de ventana gráfica de375 px) para que el botón CTA principal siga apareciendo en la parte superior de la página del sitio web.
-Nino P
28/03/2021 a las 20:47
------------------------------------
Después de un tiempo en Chrome Dev Tools, descubrí que los estilos a los que intentaba apuntar con las consultas de medios específicas del dispositivo no se registraban porque no era lo suficientemente específico en SCSS con las últimas consultas de medios.
