Html和css移动兼容

我正在尝试为我朋友的公司制作一个网站，我做了，但它只在台式电脑上看起来不错。在手机和平板电脑上看起来真的很糟糕。我做了很多研究，但找不到如何使用流体布局或任何其他方式。在一些手机上，div只是放在奇怪的地方，而在另一些手机上，div看起来很小，或者覆盖了整个屏幕。我在页面底部有一个空白（在手机上）。这里有一个链接，你可以看一下：p.s.它是克罗地亚语的，但你不需要阅读：-）。请尽快帮助我。谢谢

您应该阅读css媒体查询和响应版面。您还可以查看响应帧工作，如

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

例如：

.example {width: 100%}

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

而不是：

.example {width: 700px}

同样如上所述，使用一些CSS媒体查询

例如：

.example {width: 100%}

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

这意味着，每当有人在屏幕小于700px的设备上观看时，图像将是200px

希望这有帮助

[编辑]在手机上测试您的网站-

1） 打开要在Chrome中测试的网页

2） 右键单击并单击“检查”

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

4） 在新灰色窗口的左上角将有两个按钮，单击显示“切换设备工具栏”的按钮


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

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

这似乎奏效了。
我使用Inspect的设备配置文件在Chrome上进行了测试。
您应该了解响应性布局以及如何使用媒体查询。不幸的是，你的问题太多，无法快速解决。这就是我为什么要问的原因。我不知道如何使用它们你可以使用媒体查询：或者像Bootstrap这样的框架：在互联网上有很多地方你可以阅读和学习。让谷歌成为你的朋友。w3schools关于引导和媒体查询的教程使用引导模板重新开始：（你可以免费下载一个很好的响应模板，并在不到10分钟的时间内安装。他们的模板看起来很像你的网站。我知道这不是你想听到的，但这是我的2美分的价值我知道什么是引导，我在页面上有它，但对于模板，我必须重新开始…如果你在页面上使用引导，你可以很可能没有正确使用它。页面应该已经响应了。我确实使用了它，但不是为了使页面响应，而是为了在页面中添加一些元素HI和tnx，还有一个问题，因为你可能知道如何在不发布Hi-Ian的情况下测试它的外观，这取决于你使用的是什么CMS。WordPress内置了“预览”功能。也可以尝试一下检查您的主机控制面板，因为大多数都内置了“预览站点”功能。我使用括号和记事本++编写代码，没有移动预览选项，也没有发布filezilla@IanPETEK啊，我将更新我的原始答案，了解如何在Chrome中执行移动测试。