特定于设备的@媒体查询似乎不起作用
特定于设备的@媒体查询似乎不起作用
提问于 2021-03-28 17:44:10
大家好
我使用一个“主”媒体查询来针对从桌面到移动的所有主要更改(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;
}
}
}
}然后，当我试图更具体地处理这些视图时：
// 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;
}
}
}最后两个媒体查询似乎没有注册。
如果有帮助，所有代码都可以在'css/index.scss‘下的'src’文件夹中的github：https://github.com/DesignedByNino/gridbase-studio上使用。
这个项目使用vue.js --但是它与这个问题并不完全相关，只是让你知道如果你看一下。
谢谢您的所有答案！
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-04-03 17:54:20
在使用Chrome工具一段时间后，我发现我试图针对设备特定媒体查询的样式没有注册，因为我在SCSS中对上一次媒体查询不够具体。
Stack Overflow用户
发布于 2021-03-28 19:12:46
典型的移动优化站点包含如下内容：
<meta name="viewport" content="width=device-width, initial-scale=1.0">宽度属性控制视图端口的大小。它可以设置为特定数量的像素，如width=600或特殊值设备宽度，即屏幕的宽度在CSS像素的比例为100%。(有相应的高度和设备高度值，对于具有根据视口高度更改大小或位置的元素的页面可能很有用。) 初始缩放属性控制页面第一次加载时的缩放级别.最大缩放、最小缩放和用户可伸缩属性控制用户如何缩放页面。
然后可以使用媒体查询：
@media (min-height: 768px) and (max-height: 768px)
and (min-width: 1366px) and (max-width: 1366px) {
}更新：
我创建了一个简化的示例：
@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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66844353
复制相关文章
相似问题
腾讯云开发者
