使用浏览器窗口缩放网页

我希望网页的内容可以通过浏览器窗口正确缩放。当我改变窗口大小时，标题移动到左侧，但下一个和上一个窗口停留在网页的中间，而不是以文本为中心保持。使用浏览器窗口缩放网页

下面是代码：

<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; 
}

来源

2017-04-21 cara

看看这个链接：http://learnlayout.com/position.html原因是他们有绝对的位置。 – Gokhan

我不知道如果我理解你的问题，但你可能想看看@media。当你想要一个适用于所有设备的网站并且Bootstrap没有做你想做的事情时，@media通常是我的下一步。

来源

2017-04-22 00:28:46 Sebastian

有了这些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; 

} 

}

我不知道，你想要的位置，但你可以改变利润率左或填充或任何

来源

2017-04-22 00:35:16 RzeIMz

使用浏览器窗口缩放网页

回答

相关问题