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 - 不工作

回答

相关问题