Question

我正在网站上使用它

    <meta name="viewport" content="width=200px, initial-scale=0.5, user-scalable=no">

在我的CSS文件中，我具有重新定位某些元素的功能

@media screen and (max-width: 767px) {
    #wb_element_instance3{display: none}
    #wb_element_instance11 {left: 280px}
    #wb_element_instance12 {left: 570px}
    #wb_element_instance13 {left: 655px}
    #wb_element_instance14 {left: 705px}
}

现在是我的问题。当我用手机访问网站时，“ @ media”中的内容可以正常工作，但视口的缩放比例会偏移到网站中心。

那么，有什么办法可以使它居中吗？

非常感谢您！

Answer 1

您提供的信息很少以帮助解决该问题，但是有些一般性提示适用。 1）绝对定位（使用顶部/左侧等）不是一个好主意，特别是如果您要进行编码以集中于多种尺寸的设备为中心。

2）您可以通过添加其他媒体查询来更好地适应不同大小的设备。例如@media only screen and (min-width:480px) and (max-width:640px){ }或

 @media only screen and (max-width:480px){/*your css here*/}

等

通常可以通过使用margin属性或文本对齐来进行居中。请记住，某些CSS可能会影响其他CSS属性。如果将图像居中，则为其分配宽度（以百分比为单位），然后可以使用margin: 0 auto或margin-left：auto;和margin-right：auto;

（文本对齐）居中示例：

.wb_example{
  text-align:center;
}

<body>
  <p class="wb_example">Hello</p>
</body>

视口无法缩放到中心

1 个答案: