html - 页眉和页脚不是以移动主题为中心而是在桌面上？

Question

我刚刚创建了一个博客，在电脑上一切看起来都很完美，但是当我访问移动网站时:

1. 页眉和页脚未居中
2. 在移动网站上我的“关于”页面上，照片超出了帖子的宽度(即使在桌面上也没有)。

请帮忙，我无法弄清楚问题!对于我的第一个问题(页眉和页脚不在移动设备上居中)，我尝试将页边距设置为“0 auto”但它不起作用，对于第二个问题(照片在移动设备上溢出)。我已经尝试过图像的最大宽度，但它没有用。

我知道一些代码(我参加了 HTML 和 CSS 类(class))，但我没有使用移动网站的经验，所以我很感激任何帮助!

这是我网站的链接:http://apaperescape.tumblr.com/

另外，我不确定我需要提供什么代码，所以请告诉我!

Answer 1

这里有多个问题。至少对我来说，您的页眉和页脚在移动 Debug模式下完美居中。也就是说，这里有几个问题:

1. 如果要居中，则需要将内容宽度设置为小于 100%。或者您也可以使用 margin:auto 将其居中。

2. 您的图片也需要设置为占页面的一定百分比。例如，您可以为图像编写一个 div，将其设置为 width:80vw，然后将图像显示为:

   background:url("imagehere");
   background-size:contain;
   

或者，您可以将宽度和高度设置为 vh 或 vw 百分比，前提是所有图片的纵横比相同。

您也可以只将图像设置为 100%，然后让父级 div 进行缩放。以下是一些其他方法: Contain an image within a div?

1. 您的页面有多余的 padding-left，即 1em。内容 div 也有多余的填充，即 50px。这导致内容溢出。这很奇怪，但是 padding 超出了 100% 规则并且可以将其推到 120%，等等。切掉 padding，缩小内容分隔线，然后使用 margin:auto 将其居中。它将以这种方式更好地显示跨平台。