根据设备调整DIV

Question

因此，如果它是移动设备（特别是智能手机）设备，我很难将DIV进行调整大小。现在，我正在使用的移动设备是iPhone7plus。因此，我不确定我是否适用于此设备的尺寸。

我的原始CSS（用于桌面）是：

div#allContent div#mainContent div#contentText {
  width:50%;
  /*other styles*/
}

因此，屏幕上的文本位于页面的一半，并且注册表格将在另一半。现在，当我在iPhone中查看时，表格中的下拉物品太大了，我看不到下拉框中的文字。因此，我试图使ContentText Div的宽度为100％，然后表格为100％。

我将其添加到CSS文件的底部

我已经尝试了第一行：

/*@media only screen and (min-device-width:320px) and (max-device-width:480px) {
@media screen and (min-device-width:320px) and (max-device-width:480px) {
  div#allContent div#mainContent div#contentText {
    width:100%;
  }
  div#allContent div#mainContent div#signupContent {
    width:100%;
  }
}

是因为我有一个较大的移动设备无法正常工作吗？我应该增加最大值吗？我只是在学习移动设备支持。

Answer 1

移动设备最大宽度可能是767，然后我启动了pad和记事本设备的宽度。

@media screen and (min-device-width:320px) and (max-device-width:767px) {
  //code comes here
 }

Answer 2

我认为媒体查询语法在您的代码中有所不同

@media screen and (max-width: 480px){
}

我希望此媒体查询将适用于iPhone肖像模式。

Answer 3

也许您的问题是语法，或者您未正确选择目标，如果您发布完整的代码（ html和CSS ），我们可能会更有帮助。

无论如何，您可以使用min-width和max-width代替*-device-width。

我已经在Codepen上创建了示例，请检查一下它将为您提供帮助。