针对同一媒体查询的不同缩放级别

Question

我遇到的问题是，当缩放到90％和250％时，页面上的某个元素接受相同的媒体查询。这导致了一个问题，即我无法将两者都作为目标并且使元素看起来很糟糕。

@media (max-width:2133px) {
    #slider button.right {
        right: -80px;
        /* right: -25px;*/
    }
}
@media (max-width:768px) {
    #slider button.right {
        right: -25px;
    }
}

<section id="slider">
    <button class="right">
        <span class="arrow right"></span>
    </button>
    <!-- more html -->
</section>

以下是250％的搜索结果，因为您可以看到它达到2133宽度媒体查询：

这里是正确渲染的箭头，但也针对相同的媒体查询：

如果在250％变焦时如何制作right: -25px;？

Answer 1

首先，如果您关心缩放系数，则应使用基于em的媒体查询，以便在用户放大或缩小时让您的布局保持一致：http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/#relative

在你的情况下，如果你想猜测有多少像素等于缩放因子，假设它是2133px你可以写下面的媒体查询：

@media (width:2133px) {}

仅在宽度等于2133px时启动，但这不是一个好方法