根据设备

Question

因此，如果它是移动（特别是智能手机）设备，我无法根据其重新调整div。现在我使用的移动设备是iPhone7plus。所以我不确定我的尺寸是否适用于此设备。

我原来的css（桌面版）是这样的：

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

因此屏幕上的文字位于页面的一半，注册表单将位于另一半上。现在，当我在iPhone中查看表单中的下拉项目太大时，我无法在下拉框中看到文本。所以我试图将contentText div的宽度设置为100％，然后将form div设置为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

在i pad和记事本设备宽度开始后，移动设备的最大宽度可以是767。

@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创建了示例，请查看它会对您有所帮助。