将滑出式窗体放置在屏幕的右边缘

Question

我能够定位滑出表单"调度回叫"；位于笔记本电脑屏幕网站的右边缘。但在更大的桌面屏幕上，它会移动到显示器的边缘，而不是网站的边缘。我需要它被限制在网站的边缘。我使用的CSS代码是

.peeking-form-w .pf-trigger {
padding: 15px 20px;
background-color: #2d3091;
color: #fbaa1b;
font-size: 1.2rem;
font-weight: 400;
position: absolute;
-webkit-transform: rotate(
-90deg
) translate(-50%,-99%);
-moz-transform: rotate(-90deg) translate(-50%,-99%);
-ms-transform: rotate(-90deg) translate(-50%,-99%);
-o-transform: rotate(-90deg) translate(-50%,-99%);
top: 50%;
transform-origin: 0px 0px;
border-radius: 4px 4px 0px 0px;
cursor: pointer;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}

如何为较大的屏幕添加媒体查询，以在网站边缘而不是桌面的监视器/屏幕上显示窥视表。此图显示滑出窗体如何移动到屏幕边缘。

这就是滑出表单应该位于网站边缘的方式，即使屏幕大小增加，也应该保持在此处。

Answer 1

您需要在css中调用媒体查询。例如，您需要决定在移动设备上做什么。见下文：

@media (max-width: 1600px) {
.peeking-form-w {
DO SOMETHING
}
}