Question

我希望网页的内容能够在浏览器窗口中正确缩放。当我更改窗口大小时，标题向左移动但下一个和上一个窗口保持在网页的中间而不是停留以文字为中心。

以下是代码：

<div class="slideshow-container">

 <div class="mySlides">
 <div id="title">
`<p>______</p>`
 </div>

<a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a>

css

#title {
position: static;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: #D9BFFF;
font-family: Times;
font-size: 25px;
text-decoration: none;
}   

.prev, .next {
cursor: pointer;
position: absolute;
top: 250px;
width: auto;
padding: 16px;
margin-left: 450px;
margin-top: -22px;
color: #D9BFFF;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
} 

.next {
margin-left: 850px;
border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover, .active {
color: pink;
}

Answer 1

使用这些css命令，您可以按任何宽度更改css：

//tablet

@media only screen and (max-width:767px){

.prev, .next {
top: 250px;
width: auto;
padding: 16px;
margin-left: 200px;

} 

}

//phone

@media only screen and (max-width:480px){

.prev, .next {
top: 250px;
width: auto;
padding: 16px;
margin-left: 100px;

} 

}

我不知道，您想要哪个位置，但是您可以更改边距左边或填充或其他

Answer 2

一种实现此目的的方法是使用基于浏览器窗口大小的内容缩放。您可以使用视口单位，特别是视口宽度（vw），随着浏览器窗口宽度的更改来增加和缩小对象。如果您希望缩放停止在给定的最大浏览器宽度上，则需要将vw单位转换为像素并在该点冻结缩放。否则，随着窗口的扩大，站点将继续增长。

有关此示例，请参见我的开源项目SFUMATO。

此框架可以为您完成所有工作，但是如果您要手动编写自己的解决方案，则可以使用vw和rem单元。同样，这是我的项目，可以免费使用。

使用浏览器窗口缩放网页

2 个答案: