如何使页面移动友好？答案

【问题标题】：How to make page mobile friendly?如何使页面移动友好？
【发布时间】：2017-04-27 10:17:18
【问题描述】：

所以我在制作移动友好的网站上的特定页面时遇到了一些问题。我有移动友好的元标记<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">，但这似乎没有用。问题出在我的测试网站“www.websitetesting.pro”下的投资组合部分

受影响的元素是组合下的图像，它们在“rowone”div中以3行列出，并且图像本身在带有“rowone”的figure元素下。问题很可能出在投资组合页面“portfolio.css”的 CSS 中的上述元素上。这是它的代码。

https://pastebin.com/wugN8SSy 谢谢！

【问题讨论】：

标签： html css mobile

【解决方案1】：

您需要更多地研究响应式设计。你有几个问题，从.column div 明确设置为 300px 开始。你有 3 个连续，所以如果你的屏幕分辨率

您可以先将它们的宽度设置为 32%，将 margin-left 设置为 1%，然后在其中的 figure 元素上设置一个 max-width: 100%，以便更好地了解如何设计响应式网站。

注意： 这些值是为您的示例任意设置的，不会完全等于 100%。已经有很多网格用于响应式设计。虽然这不是我的首选解决方案，但您可能希望将 Bootstrap 作为起点。

【讨论】：

谢谢你的帮助，我可以摆脱这个了。抱歉，这可能是一个愚蠢的问题，我仍在努力自学

【解决方案2】：

最好避免设置固定宽度和使用 px 来调整大小。这是因为不同的设备具有不同的像素数和比率。尝试使用 em/rem 字体和百分比来调整布局大小。

W3 Schools 提供了一个很好的 RWD 教程。看看吧。

W3 Link

【讨论】：

谢谢你，我去看看。
只是添加到@BPierce 的答案：这在大多数情况下可能是“最好的”，但肯定不是全部。有些场景（如应用程序）需要在移动设备上进行固定宽度显示和像素完美布局。这种最佳做法是一个很好的经验法则，但它不应该导致问题。