调整窗口时仅加载响应式媒体查询
我有一个使用Avada网站构建器插件的Word Press网站，但具有自定义模板和自定义CSS文件。
我也将Bootstrap 4.6加载到该站点上。引导程序响应式查询正常运行，但是我的自定义CSS查询存在一些问题。示例 -
.image-bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
@include media-breakpoint-down(md) {
width: 100%;
height: 1620px;
position: absolute;
}
&.desktop-bg {
@include media-breakpoint-down(md) {
display: none;
}
}
&.mobile-bg {
@include media-breakpoint-up(lg) {
display: none;
}
}
}
那是我的SASS文件，CSS输出为 -
@media (max-width: 979.98px) {
.image-bg {
width: 100%;
height: 1620px;
position: absolute;
}
}
@media (max-width: 979.98px) {
.image-bg.desktop-bg {
display: none;
}
}
@media (min-width: 980px) {
.image-bg.mobile-bg {
display: none;
}
}
当我在移动ios Safari或Chrome上查看页面时，这些CSS规则不会加载。但是，CSS规则的引导格栅网格（例如Col-LG-4）正确负载。
当我在Firefox上查看页面时，如果我检查并将其视为预定义的选项，例如“ iPhone 12/13” CSS的CSS不会加载。但是，当我手动更改窗口的宽度时，CSS会正确加载。
I have a Word Press site that is using the Avada Website Builder plugin, but with a custom template and a custom CSS file.
I have bootstrap 4.6 loaded onto the site as well. The bootstrap responsive queries run normally, but my custom CSS queries have some issues. Example -
.image-bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
@include media-breakpoint-down(md) {
width: 100%;
height: 1620px;
position: absolute;
}
&.desktop-bg {
@include media-breakpoint-down(md) {
display: none;
}
}
&.mobile-bg {
@include media-breakpoint-up(lg) {
display: none;
}
}
}
That is my SASS file, and the CSS outputs as -
@media (max-width: 979.98px) {
.image-bg {
width: 100%;
height: 1620px;
position: absolute;
}
}
@media (max-width: 979.98px) {
.image-bg.desktop-bg {
display: none;
}
}
@media (min-width: 980px) {
.image-bg.mobile-bg {
display: none;
}
}
When I view the page on mobile iOS Safari or on Chrome, those CSS rules do not load. However the CSS rules for the bootstrap grid (e.g. col-lg-4) load correctly.
When I view the page on Firefox, if I inspect and view as a predefined option, e.g. "iPhone 12/13" the CSS for my backgrounds do not load. However when I change the width of the window manually, the CSS loads correctly.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我必须加载此代码线 -
现在它正常工作
I had to load this line of code -
It is now working correctly