製作響應式網頁

我正在響應式網頁上工作。我有一張圖片，內容在該圖片前。但是，當我縮小或放大到最大寬度時，我發現內容（在本例中是文本）沒有放在第一個位置。製作響應式網頁

你有什麼想法如何讓網頁更具響應性？我的意思是這裏的響應是我們放大還是縮小，位置將是相同的，但尺寸可能會改變。

任何想法將不勝感激。十分感謝！ *我已經在用引導

下面的代碼示例：

<div class="image-one"> 
     <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" style="padding:5px"/> 
     <h2 style="vertical-align:middle;margin-left:150px;margin-top:-150px;position:absolute;color:#ff0000">Kuta</h2> 
</div>

來源

2016-04-27 Mark Vullen

不知道我有一個線索，你問什麼，但看看這個反應更加靈敏結構：

<div class="image-one" style="position: relative;display: inline-block;"> 
     <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" style=" max-width:100%; "> 
     <h2 style="vertical-align:middle;left: 31.5%;top: 50%;position:absolute;color:#ff0000;">Kuta</h2> 
    </div>

來源

2016-04-27 09:05:31

哇，你怎麼能這樣做？你可以給我一些參考。它的工作，謝謝 –

好吧，打破它： - 圖像將自動設置它的寬度，所以通過設置最大寬度：100％，我們確保圖像不能比屏幕更寬 - H2是絕對的，購買你沒有使用頂部/左側定位，但你使用邊距來定位（絕對位置的點是使用頂部/底部/左/右屬性）。通過將這些位置設置爲百分比，他們保持其位置（粗略）在屏幕尺寸變化。 - 此外，div必須具有position：relative;以確保它是絕對的兒童相對於它的位置。在w3schools上查找位置和最大寬度。 –

沒問題，但是當我最小化屏幕或將其縮小/放大時，尺寸文本不會跟隨屏幕。那是我得到的另一個問題。如何根據屏幕寬度自動更改文字大小。謝謝 –

不完全確定你的問題到底是什麼。你想要文字和/或圖像rezie？也許這會幫助你：

<div class="image-one" style="background-image:url('http://sachinchoolur.github.io/lightslider/img/cS-1.jpg');background-size: contain;background-repeat: no-repeat; position: relative;width: 100%;height: 100%;"> 
     <div class="centered_text" style="position: absolute;top: 50%; left: 50%;transform: translate(-50%,-50%);"> 
      <h2 style="color:#ff0000">Kuta</h2> 
     </div> 
</div>

來源

2016-04-27 09:34:12 Michael

好吧，我會試試看。謝謝。 –

製作響應式網頁

回答

相關問題