Question

我正在创建简单的网站。在桌面上，整个内容都居中。它也适用于改变浏览器的大小。但是当我在移动设备上访问它时，一切都不像桌面上那样集中在一起

看看：http://piaskownica.lokalnamanufaktura.pl/metod2/

我认为用于居中的我的CSS包装类是错误的。 Videobackground也不以桌面为中心。

.wrap {
  position: absolute;
  left: 50%;
  top: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

  width: 90%;
  height: 90%;
}

Answer 1

问题是包装被粉碎得太小而无法包含所有元素。也许您可以使用媒体查询来减少移动设备的大小。这种情况的简单解决方案是

@media (max-width: 600px) {
    body {
        zoom: .8;
    }
}

这会将整个身体的大小减小到80％，这样它就不会溢出并换行到新的线条。此外，如果您想要将背景视频居中，请尝试将bottom中的right和50%改为0而不是#video_background，并添加你的变换线就到了。

#video_background {
    position: fixed;
    bottom: 50%;
    right: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    overflow: hidden;
    background-size: cover;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(50%) translateY(50%);
}

Answer 2

.x2-horizontal的宽度为380px，对于小屏幕来说太宽了。在响应式设计中注意固定宽度。

您的布局方法并不理想。首先，请考虑不支持transform的设备。

由于margin: auto，视频控件不会使用position: absolute居中。您必须使用与其他内容相同的居中方法（即left: 50%，然后将其拉回其宽度的50％。）

网站不以移动为中心

2 个答案: