为什么我的网页在手机上无法正常工作，但它在桌面上运行良好

Question

我正在尝试使用HTML，css和jquery创建一个网页。但问题是网页在手机或其他小屏幕设备上无法正常工作。以下是该页面的link。

Answer 1

您必须编写自定义css以支持移动设备，否则我建议您使用Bootstrap框架，以便在移动设备上兼容您的网站。 Bootstrap将允许您在Web上开发响应式移动优先项目。

如果您打算使用css，我还建议您通过canIuse在不同的浏览器和移动平台上验证您的css支持。

Answer 2

解决方案非常简单。要使用响应式布局，请使用百分比表示宽度/高度和边距而不是像素（px），以便在屏幕大小更改时自动调整大小。要使您的底部自行车图像看起来响应，请使用width: 95%和height: 95%（或您想要的任何其他百分比）。对于Bikerz图标，请尝试使用margin: Google Chrome的检查功能非常有用，因此请务必对其进行测试。只需右键单击网页，然后单击“检查”。到达那里后，您将看到“Elements”部分左侧的图标。单击它时，您可以在不同的分辨率下查看网页布局。