Bootstrap Responsive - 不工作

-1

我使用Bootstrap創建了一個非常簡單的登錄頁面。正如我在設計它的時候，我正在研究響應式斷點和Chrome，他們都看起來很棒並且工作得很好。Bootstrap Responsive - 不工作

現在，我已經上傳了我的網站，我意識到響應不起作用。在桌面上，我沒有任何問題，但在移動設備上，文本和按鈕尺寸保持不變。

www.woodtechms.com

感謝您的幫助！

2017-05-08 Mourad

是否已將此文件上傳到服務器？ 'css/bootstrap.css'，'css/bootstrap.min.css'和'css/custom-landing.css'。如果不是，您可以使用Bootstrap的CDN。看看這個http://getbootstrap.com/getting-started/#download-cdn，瞭解更多信息。 –

嗨。是的，我已將所有三個文件上傳到服務器。任何其他的tough？？ – Mourad

把代碼放在問題本身 – ZimSystem

我敢肯定，這是由於缺少header內的meta標籤。

Here's Bootstrap template

我還添加了img-responsive類標誌圖片，然後將標誌按比例縮小，因爲它應該。

來源

2017-05-08 19:18:24 kwiat1990

謝謝，這有幫助，但我也發現了我的其他錯誤。 – Mourad

我將這些行添加到我的CSS中： <！ - 上面的3個元標記*必須首先出現在頭部;任何其他頭部內容必須在*這些標籤後面出現 - > – Mourad

它的工作，但僅適用於屏幕尺寸超過768和寫在你的自定義CSS小於900px：

@media screen and (min-width: 768px) and (max-width: 900px) { 

    /* ---- Logo Woodtech ---- */ 
    .logo { 
     margin-top: 230px; 
    } 

    /* ---- Title ---- */ 
    h2 { 
     font-size: 5.9rem; 
     margin-top: 130px; 
     margin-bottom: 60px; 
     line-height: 70px; 
    } 

    /* ---- Text ---- */ 
    p { 
     font-size: 34px; 
     padding-bottom: 34px; 
    } 

    /* ---- Button ---- */ 
    .contact-button { 
     width: 400px; 
     font-size: 4rem; 
     height: 100px; 
    } 
}

如果你想讓它改變樣式其他的寬度，那麼你需要添加更多媒體查詢就像在你的CSS中添加的那樣。

對於例如，如果你希望按鈕寬度是在屏幕尺寸600px的之間300像素和800像素可以寫：

@media screen and (min-width: 600px) and (max-width: 800px){ 
    .contact-button{ 
    width:300px; 
} 
}

並且同樣可以在不同寬度的其他元素添加樣式。

來源

2017-05-08 19:30:42

謝謝！我有一個非常奇怪的問題（另一個）與背景圖像。我已將它設置在標記中。然後我讀到它應該在標記中。當我將圖片設置爲標籤時，圖片只有在正文內容完成後纔會顯示。（所有這一切都在手機中）。當在鉻或火狐檢查，它的工作原理，但當我在我的手機（摩托）檢查它沒有。有什麼想法嗎？ – Mourad

查看本網站：https：//www.html5rocks.com/en/tutorials/speed/img-compression/。 –

這可能是由於圖像大小需要花費時間來加載。它也取決於互聯網的速度。您可以嘗試儘可能壓縮圖像。另外請確保當您的網站投入生產時，您最小化其他資產，例如html，css，js。這將改善您的網站性能，併爲您提供更好的用戶體驗。 –

Bootstrap Responsive - 不工作

回答

相關問題