Question

你好，谢谢你，

我在水平间隔符上看到了很多东西，但是具体来说，我正在尝试在主体文本和this site的左侧菜单栏之间添加一个空格。

添加左空白或填充似乎不起作用。在台式机上看起来不错，但在移动设备上，文本的大小永远不会调整为“全屏”长度。

任何帮助都会很棒:)谢谢。

Answer 1

似乎所有内容都是固定宽度的...从边栏到> 200px的边距。通常，人们对此不屑一顾，因为它会在较小的设备上引起大量问题，正如@Tanckom所建议的那样，您可能应该考虑使用CSS网格来重构页面。

这意味着，无需对样式表和结构进行大刀阔斧的修改，就没有任何快速而肮脏的解决方案可以使此页面在移动设备上看起来不错。

以下是您可以采取的一些步骤，以简化响应式页面设计：

在您的const getRequest = async (url, headers) => { return axios.get(url, { headers }); });中添加以下元标记：
```
<head>
```
这将使您使页面宽度占据查看设备的整个宽度。
查看CSS Grids或CSS Flexbox作为构建页面的替代方法。这些优点是可以避免使用较大的固定数字（例如，超过200像素的边距），并且在屏幕尺寸更改时更易于操作。
查看CSS Media Queries，并查看如何使用它们根据屏幕尺寸来更改网站的样式。一种这样的媒体查询可能看起来像：
```
<meta name="viewport" content="width=device-width, initial-scale=1">
```