div無法在移動視圖上正確顯示

我有一個div，我在點擊按鈕後顯示。這div重疊在其他div和我顯示它像一個彈出。雖然看起來在桌面瀏覽器不錯，但看起來並不好當我選擇器模式爲iPhone 6div無法在移動視圖上正確顯示

<div class="row" id="divPopUp" runat="server" style="height: 50px; background-color: red; text-align: center; margin-bottom: 10px; font-size: 30px; color: white; position: fixed; width: 35%; margin-top: 45px; margin-left: 40px;padding-top: 5px">Thanks for help</div> 
<div class="row" id="staticdiv"> 
    Some text and image 
</div>

的div命名divPopUp我試圖把對div頂部稱爲staticdiv。它在桌面瀏覽器上看起來很不錯，但在以設備模式設置爲iPhone爲例進行查看時看起來非常混亂。我正在使用bootstrap。我能做些什麼來解決這個問題，因此它在iPhone上看起來不錯。

來源

2015-10-05 DevelopmentIsMyPassion

你可以發佈你的風格與你的代碼，否則一個工作小提琴會有幫助。 – Benjamin

@Benjamin有點難以創建小提琴，因爲有服務器端代碼得到填充 – DevelopmentIsMyPassion

@DevelopmentIsMyPassion您已將其'寬度'設置爲* 35％*，您是否重置它爲設備視圖？ – vivekkupadhyay

做這樣的事情：

上一頁HTML：

<div class="row" id="divPopUp" runat="server" style="height: 50px; background-color: red; text-align: center; margin-bottom: 10px; font-size: 30px; color: white; position: fixed; width: 35%; margin-top: 45px; margin-left: 40px;padding-top: 5px">Thanks for help</div>

UPDATE

.popup-block { 
 
    height: 50px; 
 
    background-color: #F00; 
 
    text-align: center; 
 
    font-size: 30px; 
 
    color: #FFF; 
 
    position: fixed; 
 
    width: 35%; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    left: 0; 
 
    right: 0; 
 
    line-height: 50px; 
 
} 
 

 

 
@media only screen and (max-width: 767px) { 
 
     
 
     .popup-block { width: 94%; /* Or whatever floats your boat*/ } 
 

 
}

<div class="row popup-block" id="divPopUp" runat="server">Thanks for help</div>

希望這樣做會解決你的問題。

來源

2015-10-05 12:21:23 vivekkupadhyay

嗨，這很好。在移動視圖中查看時，div已經移到了正確的位置。什麼是最大寬度：767px？那麼這個工作到底如何？在移動視圖上是否可以將div移動到左側？ – DevelopmentIsMyPassion

@DevelopmentIsMyPassion你應該研究[**媒體查詢**]（https://css-tricks.com/snippets/css/media-queries-for-standard-devices），是的，我們可以改變它的「位置」和任何關於** CSS **，只需在'media-query'中使用正確的選擇器 – vivekkupadhyay

你能告訴如何使用右選擇器嗎？我嘗試了.popup-block {width：94％; margin-left：1px}但不起作用 – DevelopmentIsMyPassion

div無法在移動視圖上正確顯示

回答

相關問題