使用瀏覽器窗口縮放網頁

我希望網頁的內容可以通過瀏覽器窗口正確縮放。當我改變窗口大小時，標題移動到左側，但下一個和上一個窗口停留在網頁的中間，而不是以文本爲中心保持。使用瀏覽器窗口縮放網頁

下面是代碼：

<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

使用瀏覽器窗口縮放網頁

回答

相關問題