異なる画面解像度で固定された位置

debugcn 投稿 Dev

詐欺の男性

画面サイズが異なる固定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;
}

解決策に感謝します！

brenjt

CSSメディアクエリを使用してみてください

/* 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の位置を変更します

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]