位置由不同的屏幕分辨率固定

Question

我的固定div框有不同屏幕尺寸的问题，当分辨率在1366 * 768时，框看起来很完美，但如果屏幕分辨率更大或更小，则框为running out它的位置与容器不对齐，如下图所示。

是否可以正确放置和对齐不同屏幕分辨率的框？

*注意：当页面向下滚动时，div框将缩小到边缘。

固定div：

<a href="#" data-toggle="modal" data-target="#modalBox">
    <div class="adv"><span">Big Hi to World</span></div>
</a>

CSS：

.container {
    width: 1054px;
}

.adv {
    position: fixed;
    top: 12px;
    right: 12%;
    width: 230px;
    height: 56px;
    background-color: #348cb2;
    text-align: center;
    z-index: 9998;
}
.adv:hover {
    background-color: #6fc7bb;
}
.adv span {
    display: block;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 26px;
    font-weight: 300;
    color: #fff;
    padding: 12px;
    line-height: 110%;
}
.adv-ts {
    right: 0;
    width: 48px; 
    height: 48px;

    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    opacity: 1.0;
}
.adv-ts span {
    display: none;
}
.adv-ts:after {
    content: "Hi";
    font-size: 28px;
    color: #fff;
    padding: 13px 11px;
    display: block;
}

欣赏解决方案！

Answer 1

尝试使用CSS media queries

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

每个屏幕尺寸改变adv的位置