Html 网页移动友好

我正在努力使网页移动友好。 我读到我应该做的第一件事是设置视口。 这就是我所做的。结果在某些方面更好，但不是全部。 这是我目前的问题：

---

而文本现在显示的字体比以前更容易阅读。图像的比例过大。我在电脑显示屏上水平排列了大约8张图片。当显示在移动设备上时，如果没有视口，它会显示为在一行上调整了所有8张图片的大小，并且看起来太小。但在“视口”中，每行显示一张图片，每一张都有点太大。我希望我可以保持文本显示的原样，但是每行显示4或3张图片。如何做到这一点？

检查设置视口并不是一个神奇的子弹，它可以自动将您的桌面专用代码库变成一个功能完善、响应迅速的网站。如果你的网站没有考虑到移动/响应，那么你可能需要覆盖/重新定义很多属性。不用说，如果您不提供任何代码，我们也无法帮助您解决问题。没问题，我知道这一点。在这一点上，我只是想看看事物是如何结合在一起的。现在测试一下这个@media的东西，看看它能做什么。我的第一次试验没有任何效果，我需要挖掘更多。除了媒体查询之外，你应该使用相对大小。如果您想在手机上显示4张图片/行，而不是在桌面上显示8张，最好的方法是使用百分比：在媒体查询中将图片宽度设置为25%。