Html 和 css 移动兼容

Question

我正在尝试为我朋友的公司创建一个网站，我做到了，但它只在台式电脑上看起来不错。在手机和平​​板电脑上看起来真的很糟糕。我做了很多研究，但找不到如何使用流体布局或任何其他方式。在某些手机上，div 只是定位在奇怪的地方，而在其他一些手机上，它们看起来非常小或覆盖整个屏幕。我在页面底部有一个空白区域（在手机上）。这是一个链接，您可以查看：http://agrofit.hr/ p.s.它是克罗地亚语，但您不需要阅读:-)))。请尽快提供帮助。谢谢！！！！

Answer 1

尝试使用百分比测量而不是像素测量。

例如：

.example {width: 100%}

而不是：

.example {width: 700px}

也如上所述使用一些 CSS 媒体查询。

例如：

@media screen and (max-width: 700px) {
img {width: 200px}
}

这表示每当有人在屏幕小于 700 像素的设备上查看时，图像将为 200 像素。

希望这会有所帮助。

[编辑] 在移动设备上测试您的网站 -

1) 在 Chrome 中打开您要测试的网页。

2) 右键单击​​并单击“检查”

3) 然后会在浏览器底部或浏览器右侧出现一个灰色窗口。

4) 在新的灰色窗口的左上角会有一个两个按钮，点击上面写着“切换设备工具栏”的那个

您现在可以选择不同的设备并查看它们在每个设备中的显示方式。

Answer 2

您应该阅读 css 媒体查询和响应式布局。您还可以查看响应式框架作品，例如 bootstrap

Answer 3

div {
    font-size: calc((.05em + 2vmin) + (.05em + 2vmax));
    line-height: 115%;
}

这似乎行得通。 我使用 Inspect 的设备配置文件在 Chrome 上进行了测试。